DEV Community: Sean Saranga Amarasinghe

NextJS Client-side, Server-side & Static Rendering

Sean Saranga Amarasinghe — Wed, 18 Aug 2021 01:16:49 +0000

The future of SEO and search ranking algorithms are now in heavy favour of static or server-side rendering. This means building static or server-side rendered apps instantly gain advantages in rankings.

In this article, we are going to discuss building static & server-side rendering with NextJS, a server-side rendering React framework.

What is Static Rendering & Server-Side Rendering

Server-Rendering (SSR)

In response to each request, renders the app on the Server , and then sends the rendered HTML and Javascript back to the client.

Client-Side Rendering (CSR)

Renders the app in the browser on the client at run time.

Static Rendering (SR)

Usually generating a static HTML page for every URL. Pre-built app, or renders the app at build time (e.g. when you run the npm run build or yarn build command). This is the default approach of NextJS.

NextJS

In NextJS, there are three main functions that are used for SSR and SR, and a hook that for client-side data fetching.

Built time:

getStaticProps — fetches data at build time getStaticPaths — pre-render dynamic routes at build time

Run time:

getServerSideProps — fetches data on each request SWR — fetches data on the client-side at run time

Server-Side Rendering (SSR)

The HTML is generated on the server on each request for the page — the HTML is 'dynamic' rather than 'static' as it will depend on the data required.

Each time a client requests the page, the server will fetch the data for that page, and generate the page's HTML using the data.

Next.js offers two data fetching methods for SSR — getServerSideProps and getInitialProp

React Re-rendering Components

Sean Saranga Amarasinghe — Fri, 01 May 2020 03:36:47 +0000

What is components re-rendering?

When looking into React's render performance, there are a few terms and concepts that can be hard to understand.

Here, we will look at the most important concepts about rendering in React and how React decides to re-render a given component.

And then we will find out what we can do to optimise the render performance of your React application.

Document Object Model (DOM)

To understand how React renders and re-renders work, we can peek into React codebase to see what happens behind the scenes of the library.

The tree-like DOM represents the structure of a website, represented by HTML.
JavaScript also has a DOM, which is represented as an object where the root element is the document.

You can modify the DOM with JavaScript through the DOM API that contains functions like document.write, Node.appendChild or Element.setAttribute.

What is the Virtual document Object Model (VDOM)?

Then there's the Virtual DOM (or VDOM) of React, which is another abstraction layer on top of that. It consists of your React application's elements.

State changes in your application will be applied to the VDOM first. If the new state of the VDOM requires a UI change,
the ReactDOM library will efficiently do this by trying to update only what needs to be updated.

For example, if only the attribute of an element changes, React will only update the attribute of the HTML element by calling document.setAttribute (or something similar).

Real DOM updates are slow because they cause an actual re-draw of the UI. React makes this more efficient by updating the smallest amount possible in the real DOM.

Therefore we have to be aware of the difference between native and virtual DOM updates.

Performance

When we talk about renders in React, we talk about the execution of the render function, which doesn't always imply an update of the UI.

Let's see this in an example:

const App = () => {
  const [message, setMessage] = React.useState('');
  return (
    <>
      <Info message={message} />
      <Info />
    </>
  );
};

In functional components, the execution of the whole function is the equivalent of the render function in class components.

When the state changes in the higher-order component (HOC, in this case, App), the two Info components will re-render, even though the second one doesn't even receive any props.

This translates to having the render function being called 3 times, but actual DOM modifications only happen once in the Info component that displays the message.

React already optimises this for you, so you don't have to worry too much about performance bottlenecks of UI redraws.

The execution of these render functions has two drawbacks:

React has to run its diffing algorithm on each of those components to check whether it should update the UI.
All your code in these render functions or function components will be executed again.

The first point is arguably not that important since React manages to calculate the difference quite efficiently.
The danger lies in the code that you wrote is being executed over and over on every React render.

In the example above we have a really small component tree. But imagine what happens if each node has more children and these again might have child-components.
We'll see how we can optimize this.

To read further go here

React Component Library with Material UI

Sean Saranga Amarasinghe — Mon, 30 Mar 2020 05:26:09 +0000

Why Material UI?

Creating a custom component library from scratch can be tedious and time-consuming. Instead, it’s much faster to use one of an existing component libraries well-architected components than to spin up a custom one.
Instead of using Sass or JS in CSS, I prefer using Styled Components for the ability to pass functions and props, write regular CSS, inject custom properties like any other React component and just the overall component-driven nature of it.
Well, the good news is, Material UI pretty much supports it out of the box.

Setting up Material UI

Install Material-UI's source files via npm:

npm install @material-ui/core

Or using yarn:

yarn add @material-ui/core

Material-UI components work without any additional setup, and also don't pollute the global scope.

import styled from "styled-components";
import Button from "@material-ui/core/Button";

const StyledButton = styled(Button)`
  color: white;
  && :hover {
    color: blue;
  }
`;

Pretty simple isn't it?

Using ThemeProvider for avoiding use of && everywhere

If we want to be able to style our Material UI components without using && then we have to do the following:

import { StylesProvider } from '@material-ui/styles';
import Button from "@material-ui/core/Button";

<StylesProvider injectFirst>
  <Button>Hey there!</Button>
</StylesProvider>

All it does is ensure that Material UI’s styles get injected first so that Styled Components classes take priority.

Node.js Memory Management

Sean Saranga Amarasinghe — Fri, 21 Feb 2020 05:46:34 +0000

Node.js memory management provides means to dynamically allocate memory chunks for programs when they request them and free it when they are no longer needed, so they can be reused. Application-level memory management can be manual or automatic.

Heap

The memory space managed by Node is called Heap. Heap is divided into several different spaces called Generations.

New Space

New Space is where objects are first created. It is designed to be small and fast to garbage collect.

Memory in a new space is managed by a pointer. When a new space is created the pointer moves to the next free spot.

When the pointer reaches the end of the space, it goes into a Scavenge operation to identify all of the objects in memory that no longer referenced.

Then it removes these, unpacks the memory and re-allocate the pointer to the next available free spot.

Old Space

Objects that survive ~two garbage collection operations~ are promoted into the old space.

Old space is much larger than the new space, so it implements a different garbage collection algorithm - Mark-sweep

The GC marks the objects being referenced. Anything not marked is unreachable, and the sweep process will remove them.

To read more visit Node.js Memory Management

React Concurrent Mode

Sean Saranga Amarasinghe — Tue, 18 Feb 2020 03:27:50 +0000

Previous workarounds

Debounce and throttle are common workarounds to mitigate for example stutter in an input field while typing.

Debounce – Only update the list after the user stops typing Throttle – Update the list with a certain maximum frequency

Similar to git branches
Concurrent Mode is like React working on git branches.

Eg:- Navigating between two screens in an app

In React Concurrent Mode, we can tell React to keep showing the old screen(like another git branch), fully interactive, with an inline loading indicator. And when the new screen is ready, React can take us to it.

Read more about React Concurrent Mode in this article