Forem: Pushkar Borkar

Rendering Strategies in Next.js

Pushkar Borkar — Mon, 25 Jul 2022 11:41:15 +0000

Next.js is a framework of recent times. It is built on the shoulders of its predecessors and hence it packs all the best features of them. Due to this Next.js comes with choice of rendering the content. You can either opt in to render a blank html and fill in the components dynamically with javascript, or you can make the server send you packages of content pre-built on the server, ore even better you can ask for a cached copy of the content from a CDN. And the best part is you don't have to subscribe to a particular strategy for the whole application, you can customise and use the strategy best for that page/route for each page/route separately.

In this blogpost I will try to compile my understanding of these various rendering strategies, when is it best to use them and how to implement each one in Next.js. So let's get started.

CSR: Client Side Rendering

CSR or Client Side Rendering is exactly what it says, the html shell of an application is sent from the server to the client and then the javascript fill int the content as per the route. By default* the Next app uses client side rendering to render the content on the site.

It is ideal to use CSR when the data on the site is purely dynamic i.e. there is nothing certain about what the data will be and the data is being filed dynamically. Some use cases for these will be a payment portal for an e-commerce store, a chat window in a chat app, etc.

You don't have to do anything different than writing normal React components in Next to use CSR, as I said Next uses CSR by default*.

export function ReactComponent() {

  useEffect(() => {
    // fetch data here
  }, [])

  return (
    // render the component
  )
}

PROS: Your pages are dynamic and no recurrent server calls are made.

CONS: If the data get huge there will likely be lags and loading states (Bad UX) and there is nothing for the browser bots to read (Bad SEO).

SSR: Server Side Rendering

When you use SSR or Server Side Rendering, Next get the data require for the path on the server itself and builds the page for that route on the server and then sends the prebuilt page to the client and hence, providing page fully loaded with content from the very start.

SSR is ideally used where the you want the used to not notice any lag in the page loading and the data coming in to the page hence improving the user experience. It can also be used where the the there is less need of the page being more purely dynamic and more need of improving the SEO of the site.

In Next.js you can simply make a page use SSR rendering strategy by adding in a method called getServerSideProps() and fetching all the dependent data in this method and export props from it and consuming the props in the React component for the page.

export async function getServerSideProps() {

  // fetch data here

  return {
    props: {
      data,
    }
  }
}

export function ReactComponent(props) {

  return (
    // render the component
  )
}

PROS: Better SEO, Better User Experience

CONS: More server calls

SSG: Static Site Generation

This is the best (objectively 😁), SSG or Static Site Generation is when the pages for the routes are built and stored to a CDN, so whenever the route is hit the page is server readily built from the CDN. (Just WOW)

This strategy is best for the cases where the data on the page is not changes frequently, such as blogs and landing pages. You can SSG for changing data too but it is not ideal.

In Next.js to implement a page/route as statically generated page, you just need to add a additional method provided by Next called getStaticProps(), fetch data here, export it as props and then consume it in the React component for the page/route.

The tricky part with this is when you need to SSG dynamic routes. What you need to do in these situations is add another method provided by next called getStaticPaths(), return all the possible sub-routes from here and consume these as the ids in the getStaticProps() method.

export async function getStaticPaths() {

  // get data here

  return {
    params: {
      id: *ID for this page*,
    }
  }
}

export async function getStaticProps() {

  // fetch data here

  return {
    props: {
      data,
    }
  }
}

export function ReactComponent(props) {

  return (
    // render the component
  )
}

PROS: SuperFast, No Server calls, directly server from CDN

CONS: Not good with frequently changing data

Conclusion

All these rendering strategies are different tools and each of these tools is suited for different task and accomplish different things. The great thing is in Next.js you can configure for each page/route to which strategy to use for that particular page.

* Well Next.js don't use CSR all the way. It will serve server render pages for the path and then CSR takes over.

Unraveling the Components of a Next.js App

Pushkar Borkar — Thu, 07 Jul 2022 21:19:44 +0000

When I started writing code in React, I didn't bothered to figure out what do the boilerplate and configuration files do. That meant I was writing code that works great but I was still feeling like an imposter. I took me long to get over that. So, while starting to learn Next.js, that was the first learning I did. This blog is part of my current running challenge #30DaysOfNext (follow the challenge @PushkarBorkar).

So, pull up your pants 😁 and type npx create-next-app in your terminal and let's get started.

Overview of the Folder Structure

When you first run the create-next-app command, Next.js builds you a basic boilerplate Next App. Congratulations 🎉 you successfully built your very first Next App 😎. (You can load up localhost:3000 to see it deployed there.)

The file tree for your app will have a /pages folder, /public folder, /styles folder and a bunch of config files. In this post we will discuss each of the folders and config files in detail.

Pages and Components

The first folder you would see is the /pages folder. In Next.js this folder is mapped to routes on the app out of the box. Woah! That means that to add a new route in your app you just have to add a React Component(.js/.ts OR .jsx/.tsx file) in this folder and Next.js will create a route with the name of file. By convention all the files in this folder must follow camel-case naming. Next.js by default pre-renders all the page in the pages folder (Better for SEO 💪), although you can opt which rendering strategy to use to pre-render the components SSR or SSG.
Blog on Rendering Strategy coming soon 🚀

By Default there will be two files, namely index.tsx and _app.tsx and an /api folder added to this folder. These have special meaning attached to them. Let's discuss them one-by-one.

index.js

This files points to the base URL / of your app. This will give you an idea of how a React Component for a URL route must be structured in a Next.js App. Every page component is of type NextPage. So, Everything that you see currently on the localhost:3000 is rendered from here.

_app.js

This is a special component. This file has the App component in it. App Component utilises the <Component/> provided by Next.js to initialise all the pages. Additionally, this App Components can be customised to UI element persistent to the view i.e. visible on every page like a Navbar or a Footer. Also, this is where you will save a state that you want to be consistent on all the pages.

APIs

With Next.js you can serve APIs from the same endpoint as that of you frontend. For adding API paths to the app you will just have to add files with the names that you want of the paths of the API to be. For example, if you want a /posts path for the api then you just need to add a file named posts.ts in the /api folder and Voila! you can fetch data from the localhost:3000/api/posts.

Note: All the apis paths will be in /api/<filename> format.

Routing

Routing is a handled in a very interesting way in Next.js Apps. As discussed above all the files in the pages folder points to separate paths same as the file name. But you can also nest paths by making a folder in the /pages folder and adding files into that folder. For Example if you want to show friends of a user as /user/friends, no problems, just add a /user folder in the /pages folder and add a friends component in the /user folder. It's as simple as that.

There is yet another very interesting topic under routing Dynamic Routing, I will save that for future posts 😁

Note: It is better to keep only the main components in the /pages folder and refractor the helper components into a separate /components folder under the root.

Public

The second folder is the /public folder. This is similar to public folder to React. You can access all the files in this folder straight from the browser by just typing file names after the base URL (go ahead and try accessing the favicon.ico file in the browser). Due to this fact, all the assets that the browser need like the logos and the favicons are stored in this folder. Also due to the same, you must be very careful of what you put in the /public folder.

Styles

The final folder is the /styles folder. As the name suggests this folder contains the styles for the app. You are provided with built in Sass support in Next.js. But there are some conventions that are followed in a Next App for the naming of stylesheets. There are two types of stylesheets in Next.js namely,

Global Stylesheets: These files are named regularly as <filename>.css. You can only import these files in the _app.tsx component and no other component file.
Module Stylesheets: These files are for more broader use they can be imported in any component. Naming convention for these is you need to add .module in their name. So the name of these files are in <filename>.module.css format.

Config Files

Apart from these folders there are config files in the file tree. Most of the times you will see the following files:

.eslintrc.json: Config for ESLint
next-env.d.ts: This is a file defining various types in next. This file must not be changed
next.config.js: This is the Next.js Config file.
tsconfig.json: These are configurations for the Typescript Compiler (by default SWC but if you add .babelrc file then it switches to Babel)
package.json: This has all the app data and data about npm dependencies.

Out of all these next.config.js and tsconfig.json are the most interesting ones. So, lets discuss them further.

next.config.js

This is the file that has all the Next.js configurations. It is usually a ES5 Module with various config key-value pairs. There are many configuration, but I will discuss a few here,

headers: you can set custom header for the app in here.
basePath: you can set a custom base URL using this config.
reactStrictMode: it is a boolean to toggle the Strict mode on/off
staticPageGenerationTimeout: This is the time amount in seconds to wait before declaring static render failed. You can read about all the configuration available here.

tsconfig.json

This is the configuration for the Typescript Compiler. I will discuss some frequently used attributes of the config here,

target: this is the flavour of javascript that the typescript is compiled to.
noEmit: when false create .d.ts files for each TS file which has only types for the file
include: which files to include for type checking
exclude: which files to not bother for type checking. You can check all other available configs here.

So, now you have the foundational idea to how the Next.js App is structured and what does each and every part of the App do. Now we can go about making wonderful Apps with Next.js without feeling like imposters. 😇
I'm learning Next.js for next 30 days straight (#30DaysOfNext), do join me @PushkarBorkar ✌️

Exciting World of Next.js

Pushkar Borkar — Wed, 06 Jul 2022 20:42:57 +0000

Since the day I first heard of the next big thing, Next.js 😉 I was drawn to it. I have been reading about the workings of Next.js and more I learn about it, the more I am amused. So, I started a new challenge #30DaysOfNext (updates on the challenge on my twitter - @PushkarBorkar). With all that said, let me introduce you to the Exciting World of Next.js! 🚀

What is Next.js exactly? 🤔

Next.js is a flexible React framework that gives you building blocks to create fast web applications.

So, Next.js is a framework built on React. What does that mean? Next.js embraces React for what it does best, UI Rendering and augments it with tools for the other features like Routing, Data Fetching, Different Rendering Methods(very exciting topic), and much more.

Next.js has a compiler made using SWC(Speedy Web Compiler), a platform made in Rust which a low level language. It complies the code written in JSX and Modern TS/JS into code supported by all the browsers. Due to the fact that this is made in Rust, it way faster that the babel. 💪

Perks of Next.js for Devs 🧑‍💻

Next.js comes built-in with TypeScript and Linting using ESLint. It has a cool feature named Fast Refresh, which changes the UI instantaneously on change of React code without even loosing state 😳.

If you want to make new routes, no problem, just add a component in the /pages directory and the route with the name of the file will render the component automatically 🤯

You as a developer can choose how to render a components, do you want to render it server side and them serve to the client, or do you want to generate content on the client side. You can even cache a static site and distribute it from a CDN. And the best part is you can opt in for different styles of rendering and per-page-basis(different rendering method for different page) in the same App.
Rendering in Next.js is a very interesting topic I will cover that in the next blog

Smooth End-user Experience with Next.js

While making the code production ready Next.js optimises the code by performing the following steps,

Compiling: converts all the JSX and Modern TS/JS files into more accessible code for the browsers
Minifying: removes all the indents, comments and non-essential elements in the compiled code.
Bundling: bundles all the various components within the app and from the dependencies into a optimised bundles for browsers
Code Splitting: splits the bundles according to various pages which are nothing but various paths in the app

With the help of these steps Next.js is able to do some magical things. For Example, it pre-renders all the end-points that the links in the currently rendered page points to and caches them, so when a link is clicked the page is fully rendered and is served instantaneously.

Why is Next.js Better?

Next.js was first introduced in October of 2016. It has been built upon the shoulders of the tech from last two decades. It brings the best of every phase of the web.
It has the composability of Client Side Rendering, It has the dexterity of the Server Side Rendering and the great user experience for both Developers and End-Users.

Closing Thoughts

Next.js is a remarkable milestone in the journey of web. It is performant, has great dev experience and a great community.
I am planning on learning this wonderful framework for the next straight for next 30 days (#30DaysOfNext). You can learn with me, I will be sharing my DevLogs in the form of blogs and tweets.

The Official Docs for Next.js