CODEWITHSUNDEEP
reactjswebpackreact-routerclient-sideserver-side-rendering
a.developer
a.developer

Reputation: 59

Does server reponds with new html on every url change in server side rendering?

I am using react with server side render and webpack for client side but instead webpack handling view on url change the server respond with new html..is this correct?

Upvotes: 1

Views: 437

Answers (2)

Raphael Rafatpanah
Raphael Rafatpanah

Reputation: 19967

Let's ask a more general question:

When does my server handle a request?

Let's first ask what server side rendering has to do with the above question. Does server side rendering change the answer to the above question? No. Server side rendering just does saves some of the work the client would have done. Still, the server needs to handle the request just the same. The difference is that response may be pre-rendered or it may just be JavaScript.

I am using ... webpack for the client side

How does using webpack affect the server? Does webpack somehow handle requests instead of the server? What is actually happening?

Let's take another step back.

For a server to handle a request, a request needs to be sent. When do requests get sent?

  1. On page loads (server side rendering or not)
  2. On XHR (aka AJAX) requests

Does the server respond with new html every time the url changes?

This depends. Are you using code splitting with webpack? Are you using lazy loading with React Router? If so, then it's likely that there will be cases where the server does have to handle a request when the URL changes.

If your entire application is just one javascript bundle, then it's likely that no XHR request is being sent, since React Router just loads different components behind the scenes.

If you want to know exactly when the server is handling requests, and for which URLs, simply check out your server logs, or create a custom log yourself.

More about server side rendering.

What's the point of server side rendering, then?

The point is to create a faster time to interactive experience for your users. Also, if some of your users disabled JavaScript, they would still be able to rendering your app (of course much of it may not work after that if, for example, you are using JavaScript events).

Some projects use an architectural pattern called Microservices - aka Service Oriented Architecture (SOA).

The point of this is to have separate "apps" that compose together to create your app. This allows for separate teams to build simultaneously while allowing for things like queues, failures, ability to monitor separate components in isolation, testability, debug-ability and reusability.

In this case, your client may request an endpoint that it becomes aware of and it may receive a pre-rendered (server side rendered) component - or it may not be pre-rendered (just JavaScript).

Final note: Webpack does not handle requests for you. Webpack essentially just gives you one or more JavaScript bundles along with other static assets like HTML, images, etc. Please comment with questions.

Upvotes: 1

Komo
Komo

Reputation: 2138

No, that's not correct. Classically, when using server side rendering, only the initial HTML payload is computed server side. Once the html is rendered in the browser, client takes over. Any subsequent url change is managed by client side routing. Server side rendering will only take place if you refresh your browser.

Upvotes: 4

Related Questions