I heard SSR in Syntax podcast for a while .
But I just realized there are so many interesting details after I watch the lesson by Stephen Grider today.
It use React to render the skeleton of components in the server side.
After the browser load the rendered HTML, it load the client side Javascript.
It will update the DOMs and inject all the dynamic part.
I really like the courses provided by Stephen Grider. They're not only easy to understand but also cover how the mechanism works under neath.
Here are some interesting items of SSR.
- use different Router implementation in Server side vs Client side
- render the html in server side with the data loaded, the loaded data keeped in the store will be also printed in Javascript in the html. Then client bundle javascript will use the store as initial state as client side redux store.
- If the API need to be authenticated. If it's requested in the server side , the cookie need to be take from the HTML request . If the client request the API directly , it should request the API to the render server as a proxy. Because the cookie only works on the same domain.
There are two major benefits why SSR exist.
- It eliminate the time cost of the first API request and DOM rendering in the client side
- Open graph tag provided in server side has better compatibility in social media platform
But the developers really need to evaluate whether it worth , it's far more complicated to implement SSR React than the normal client side React. There are too many stuff need to be taken care.
I really like the courses provided by Stephen Grider. They're not only easy to understand but also cover how the mechanism works under neath.
Here are some interesting items of SSR.
- use different Router implementation in Server side vs Client side
- render the html in server side with the data loaded, the loaded data keeped in the store will be also printed in Javascript in the html. Then client bundle javascript will use the store as initial state as client side redux store.
- If the API need to be authenticated. If it's requested in the server side , the cookie need to be take from the HTML request . If the client request the API directly , it should request the API to the render server as a proxy. Because the cookie only works on the same domain.
There are two major benefits why SSR exist.
- It eliminate the time cost of the first API request and DOM rendering in the client side
- Open graph tag provided in server side has better compatibility in social media platform
But the developers really need to evaluate whether it worth , it's far more complicated to implement SSR React than the normal client side React. There are too many stuff need to be taken care.
No comments:
Post a Comment