CODEWITHSUNDEEP
reactjswebpackserver-side-rendering
Miguel Giménez
Miguel Giménez

Reputation: 455

React server Rendering

I want to create a server side react app, and I have a few doubts:

1) When you use renderToString from react-dom/server, do you also need to use webpack to build the project , or this does the job ?

2) do you need to add the 

    <script src="/bundle.js"></script>

to the html ? if so , why ? isnt renderToString already passing this file as a string ? thanks

Upvotes: 0

Views: 1113

Answers (2)

Kira
Kira

Reputation: 452

Adding to @Brendan's answer (he correctly mentions the use of webpack):

  • The main reason for SSR is to be able to send out Html instead of pure JS for SEO and faster load times. This isn't something mandatory though, use it with caution, maybe you don't need SSR.
  • renderToString is only sending the html content as rendered on a Node server, not your browser. So by default it does not know about the device its being rendered on, personalization (like cookies etc.), screen size etc. window and document objects don't exist on Node. The only benefit you get is the static Html.
  • bundle.js is the JS hook which is going to render the content like a SPA (Single page application) regardless of the static html provided. This is what makes your website dynamic. Here you can do stuff like flex wrap which makes the website responsive. That's not possible (not out of box) in SSR.

In case you're just starting with SSR, this article might help: https://medium.com/@gagan_goku/react-and-server-side-rendering-ssr-444d8c48abfc. Have a simple hack that you might want to try out to make life simpler.

Upvotes: 1

Brendan Gannon
Brendan Gannon

Reputation: 2652

  1. These two things are unrelated. All renderToString does is get what your React component renders, as a string of HTML (instead of creating objects to represent the components and attempting to render them into the DOM, as it would on the client). It returns that string. React is typically only used to render elements inside the <body>, so normally you would be rendering the contents of your root React component, as a string, and then inserting that string into some sort of template that includes your doctype, <html>, <head>, and <body> elements. Then it's up to you to have your server return this string of text that makes up the HTML document.

  2. The need to use webpack and the need to include the JS app as a <script> in the HTML that you send to the client are also unrleated. Normally yes, you need to do both.

    • You need to use webpack (or another module builder and/or transpiler) if you follow standard React development practices (e.g. using ES6 syntax, using the commonJS or es6 module importing system). (In theory you could write a single JS file with all your React code, using no JSX syntax, in ES5 compatible code that wouldn't need to be built or transpiled, but this is no doubt pretty rare.) This is just about producing JS code that browsers will understand.
    • You need to include the React app on the client side, because when you render on the server you are just creating a string of HTML. Like any HTML, that will be static without JS to handle interactions. So you load the client-side build of your JS app in the browser, and as it runs, the client-side React library determines what the DOM is supposed to look like, inspects the DOM as you rendered it from the server, and if they match, it doesn't need to re-render anything. (If they don't match, React on the client side will re-render your app, which defeats the performance benefits of server-side rendering, so it's important that your app render exactly the same in both environments.) You need the client side app loaded to bind and fire event handlers, handle page routing, etc -- as a client side JS app, it works like any other client side JS app, whether it was initially server-rendered or not.

Upvotes: 1

Related Questions