What’s New With Server-Side Rendering in React 16 – Hacker Noon

What’s New With Server-Side Rendering in React 16:  by @xander76 #JavaScript #ReactJS #NodeJS

  • Naturally, this feature is also supported by React 16’s server-side rendering.So, you can now server-render components that look like this:class MyArrayComponent extends React.Component { render() { return [ div key=”1″first element/div, div key=”2″second element/div ]; }}class MyStringComponent extends React.Component { render() { return “hey there”; }}class MyNumberComponent extends React.Component {…
  • To learn more about this feature, read Dan Abramov’s post on the React blog about the change.React 16 SSR Doesn’t Support Error Boundaries or PortalsThere are two new features in the React 16 client-side renderer that are unfortunately not supported in the server-side renderer: Error Boundaries and Portals.
  • If for any reason there’s a mismatch, React raises a warning in development mode and replaces the entire tree of server-generated markup with HTML that has been generated on the client.In React 16, though, the client-side renderer uses a different algorithm to check that the server-generated markup is correct.
  • And when the client-side renderer in React 16 detects a markup mismatch, it only attempts to change the HTML subtree that doesn’t match, rather than the entire HTML tree.Generally, this change shouldn’t have much effect for end users, except for one fact: React 16 doesn’t fix mismatched SSR-generated HTML attributes…
  • This performance optimization means that you will need to make extra sure that you fix any markup mismatch warnings you see in your app in development mode.React 16 Doesn’t Need To Be Compiled For Best PerformanceIn React 15, if you used SSR straight out of the box, performance was less…

There are lots of exciting new bits (most notably the Fiber rewrite), but personally, I’m most excited about React 16’s many improvements that have been made to server-side rendering. Let’s take a…

What’s New With Server-Side Rendering in React 16A quick introduction to the new features in React 16 SSR, including arrays, performance, streaming, and more.React 16 is here! 🎉🎉🎉There are lots of exciting new bits (most notably the Fiber rewrite), but personally, I’m most excited about React 16’s many improvements that have been made to server-side rendering.Let’s take a deep dive into what’s new and different with SSR in React 16, and I hope you’ll end up as excited as I am!How SSR Works In React 15First of all, let’s get a refresher on what server-side rendering looks like in React 15. To do SSR, you generally run a Node-based web server like Express, Hapi, or Koa, and you call renderToString to render your root component to a string, which you then write to a response:// using Expressimport { renderToString } from “react-dom/server”import MyPage from “./MyPage”app.get(“/”, (req, res) = { res.write(“!DOCTYPE htmlhtmlheadtitleMy Page/title/headbody”); res.write(“div id=’content'”); res.write(“/div/body/html”); res.end();});Then, in your client bootstrap code, you tell the client-side renderer to “rehydrate” the server-generated HTML using render(), the same method you would use in a client-side rendered app:import { render } from “react-dom”import MyPage from “./MyPage”render(MyPage/, you do this correctly, the client-side renderer can just use the existing server-generated HTML without updating the DOM.So, what does SSR look like in React 16?React 16 Is Backwards CompatibleThe React team has shown a strong commitment to backwards compatibility, so if you were able to run your code in React 15 without any deprecation warnings, it should “just work” in…

What’s New With Server-Side Rendering in React 16 – Hacker Noon