Server-Side Rendering is a technique that is often used to increase the performance and SEO of the pages rendered in a web app. The markup is generated on the server and then output the browser in HTML. This allows for search engines like Google to properly index URLs within your application. In this tutorial, we will go over how to use React.js SSR(Sever-Side-Rendering) with Next.js and Typescript. If you’re interested in learning more, click here to watch some of our videos on React development.

Next.js Setup

First, we’ll have to create a new project using the create-next-app command

$ npx create-next-app next-example

Now under the pages folder, change the index.js file to index.tsx and try to run the applications. You’ll run into the error ‘It looks like you’re trying to use TypeScript but do not have the required package(s) installed.‘.

Next Typescript Error

Next Typescript Error

To fix this, you must add typescript as a dependency.

yarn add --dev typescript @types/react @types/node

Now you should be able to run the application using npm run dev.

Nextjs initial page

Next.js initial page

Rendering Server Data

Now that the project is setup, we’re going to want to display data on the screen. This data will come from a Rest API but because it’s using SSR, it can be detected by search engines on the initial load. You can do this by a method called getInitalProps. This loads data into the component before the initial page load and allows for you the generate HTML to display in the browser.

In this example, we’ll load a user profile. We’ll create an interface that represents some user data.

<span class="token keyword">interface</span> <span class="token class-name">User</span> <span class="token punctuation">{</span>
  id<span class="token punctuation">:</span> <span class="token keyword">number</span><span class="token punctuation">;</span>
  name<span class="token punctuation">:</span> <span class="token keyword">string</span><span class="token punctuation">;</span>
  username<span class="token punctuation">:</span> <span class="token keyword">string</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

Inside of our Home component, we’ll add the getInitialProps method. We will also add isomorphic-unfetch in order to make fetch requests server-side.

yarn add isomorphic-unfetch
Home<span class="token punctuation">.</span>getInitialProps <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> userContent<span class="token punctuation">:</span> User <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetch</span><span class="token punctuation">(</span>
    <span class="token template-string"><span class="token string">``</span></span>
  <span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>r <span class="token operator">=</span><span class="token operator">&gt;</span> r<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>

  <span class="token keyword">return</span> <span class="token punctuation">{</span> userContent <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

Now inside of the component, use the userContent prop to display the user information.

<span class="token keyword">const</span> Home <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">{</span> userContent <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">&gt;</span> <span class="token punctuation">(</span>
  <span class="token operator">&lt;</span>div<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>Head title<span class="token operator">=</span><span class="token string">'Home'</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>Nav <span class="token operator">/</span><span class="token operator">&gt;</span>

    <span class="token operator">&lt;</span>div className<span class="token operator">=</span><span class="token string">'hero'</span><span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>h1 className<span class="token operator">=</span><span class="token string">'title'</span><span class="token operator">&gt;</span>Welcome <span class="token punctuation">{</span>userContent<span class="token punctuation">.</span>name<span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>h1<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>p className<span class="token operator">=</span><span class="token string">'description'</span><span class="token operator">&gt;</span>
        Username<span class="token punctuation">:</span> <span class="token punctuation">{</span>userContent<span class="token punctuation">.</span>username<span class="token punctuation">}</span>
      <span class="token operator">&lt;</span><span class="token operator">/</span>p<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
<span class="token punctuation">)</span>

Now when you run the app, you should get back HTML generated by the server.

Next SSR USer Profile

Next SSR USer Profile


Using Server Side Rendering with React.js is pretty straight forward. Many of the benefits such as increased and page load and page load times make it a great choice for client-facing apps. If you’re interested in video training on  React.js and Rest API development, please click this link to gain access.

Codebrains Newsletter

Get weekly dev news and tutorials.

Powered by ConvertKit