Introduction:
Server side rendering or SSR is a technique to build fully rendered HTML page in the server side, which is then travels through network and gets rendered in the client side browser.
Conventionally server submits an empty index.html page which have build script in a script tag to the client’s initial request and then javascript start’s its part where it builds index.html page or renders the components to index.html and for consecutive navigations.
why SSR? 🤔
Loads pages faster which results in better user experience
Ideally on client’s initial request it gets an empty index.html page, then javascript tries to render components to it.
Assume that the initial page consisting of complex components need to rendered with server data as it will be slow and user need to wait the whole time while page is being rendered.
In which SSR comes into scene in providing fully rendered pages with server data(no external api call required as it is taking place in server) which is fast.Content is rendered before initial page load which is SEO friendly
Old ways of SEO includes adding meta information title and description to the page so that they are indexed according to the content in title and description.
Search engines no longer gives any points to it.
So when a fully rendered page is being served, the search engine crawls over the content and index the web pages in a better way.
By this content in page contributes to the better index.
Rendering server-side may be ideal for initial static site generation, but frequent server requests and full page reloads for all consecutive navigations can result in overall slower page rendering in more complex applications.
Steps to initiate SSR in React app:
Creating new project with create-react-app skipped here
Step 1 - Modify index.js file in src directory:
ReactDOM.render is changed to ReactDOM.hydrate in index.js file, hydrate method is same as render but it indicates ReactDOM to hydrate the server-side rendered content
Step 2 - Create express server and render app component on initial request:
App component is imported and converted static html string and this static content with rendered React components which is attached to div with id root returned as string in response.
This fully rendered page is hydrated to DOM on client side.
Step 3 - webpack configuration:
Create a file with name webpack.server.js
Use of target: ‘node’ and externals: [nodeExternals()] avoid including node-module files in bundle as server directly access them.
Conclusion:
SSR can be implemented using Nextjs framework which is build on top of React library which provides different SSR techniques like SSG, SSR and ISR.
Each technique generates a fully rendered html page with required data(no external api calls needed) and send it to client on initial request.
Server side rendering or SSR:
One need to navigate to the page to get server rendered page and whenever the page is visited again, page is build in server again and sent it to client.
Static site generation or SSG:
One need to navigate to the page to get server rendered page and on consecutive visits to the page will not be re-rendered in server.
Incremental static regeneration or ISR:
One need to navigate to the page to get server rendered page and the page will be re-rendered in the server, will be sent to client on defined time interval.
Top comments (0)