DEV Community: Iago Bortolon

When to use server-side rendering (SSR) and static site generation (SSG)?

Iago Bortolon — Fri, 22 Apr 2022 15:21:56 +0000

Introduction

Hey, here we are to show you the difference and how to apply and hopefully make it easier to learn when to use this two types to displaying your application.

The following infos and codes will be in typescript format and made acoording to NextJs docs to make it easier to understand.

Why not all the API’s calls can be made by useEffect and axios?! While reading this post you will learn that with the following functions the requests for the API’s will be made out of the clients range, making your data less vulnerable, on the contrary with useEffect and axios in client side it’s possible, with enough kwnoledge, to access informations by the browser that shouldn’t be able for.

So continue reading to learn a little bit about when to use each of them, and if you need more info about how to use the functions mentioned access the NextJs docs here.

Server-side Rendering (SSR)

This is a way to an application construct the page on server before be sended to the client’s browser.

When we read the documentation from next to work with SSR we can use the function getServerSideProps, this function is called only in specific moments, and the most important this function is called in a server-side direct in a node server created by next framework.

When your fetching is done out of the client(browser) and is executed in a side server where the browser only access the return props from then, that is the reason to your project become more safe

You will use this function when you need to pre-render the fectched data at a request time, every function of your application will do all these fetching before the final render of your application, so use only when needed, if your data doesn’t need a extra layer of protection or if it needed to be updated frequently fetch this data in client side.

The syntax to use getServerSideProps to fetch some data is the following:

export default function Page({ data }) {
  // Render data...
}

// This gets called on every request
export const getServerSideProps: GetServerSideProps = async () => {
  // Fetch data from external API
  const res = await fetch(`https://.../data`)
  const data = await res.json()

  // Pass data to the page via props
  return { props: { data } }
}

Static Site Generation (SSG)

This method generate a static HTML site in build time, that is, all the elements fetched or constructed on the function used to do the SSG will be loaded at the moment of project build.

In NextJs we can use the function getStaticProps, that function will return props to your component when you build your project, so do not use this to fetch data that is updated often.

You should use this function when the data required to render the page is avaible in build time, or when it comes from a headless CMS, or the data can be publicly in cache and when the page must be pre-rendered fast for SEO reasons.

The syntax used in getStaticProps is the following:

// posts will be populated at build time by getStaticProps()
export default function Blog({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li>{post.title}</li>
      ))}
    </ul>
  )
}

// This function gets called at build time on server-side.
// It won't be called on client-side, so you can even do direct database queries.
export const getStaticProps: GetStaticProps = async () => {
  // Call an external API endpoint to get posts.
  // You can use any data fetching library
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  // By returning { props: { posts } }, the Blog component
  // will receive `posts` as a prop at build time
  return {
    props: {
      posts,
    },
  }
}

Middleware

The middlewares are functions that intercepts the request and can do some changes before pass the information to another middleware or final component.

This function can be used in NextJs easy peasy, reading the docs we reach this example:

// pages/_middleware.ts

import type { NextFetchEvent, NextRequest } from 'next/server'

export function middleware(req: NextRequest, ev: NextFetchEvent) {
  return new Response('Hello, world!')
}

In the directory of pages we create a file named _middleware.ts or .js and it is setted to use, then this function will intercept the request made by the client and return something based on your rules created.

Conclusion

When you need to access the payment API is recommended to use one of those functions, in my case i needed to use to retrieve the value of the product to show on the static page, because this doesn’t change frquently i used SSG.

Another example but for SSR is when i had the need to access the information of the posts from an CMS, because they are not often change but need to update when requested, so every time the posts update i can call a revalidate and refetch all data for the posts.

The project that i used this functios is avaible here.

Thak you for reaching the end, and a i hope that helped you!

Creating a Countdown Timer with react-hook

Iago Bortolon — Thu, 03 Mar 2022 13:04:49 +0000

Intro

Here we are to talk how to create a countdown timer in react using native hooks.

This timer that we will build is a countdown of 5 minutes, but nothing will hold you, if you want to try do a stopwatch based on this material.

Using the useEffect() and useState() hooks is possible to store the data of your time and update on screen in real time, but to do that we will need the help from the function setTimeout().

Let's begin!

To start our project make shure that your project is a React project in Typescript or javascript, you can create those with create-react-app, next or vite.

If is your first try that is how you create the project:

npx create-react-app my-app --template typescript

# or

yarn create react-app my-app --template typescript

How this works?

This timer we are about to create needs a start time, in this project we will set to 5 minutes.

Now we need to think how tom make this work, the amount time could be in hours, minutes or seconds, we will use seconds just by the fact that is easier to convert seconds to minutes or hours, because all seconds will be a integer number.

Starting the code

So the first thing that we will do is to import our hooks and stablish our start time:

import { useEffect, useState } from "react";

const COUNTDOWN_AMOUNT_TOTAL = 5 * 60; // 5 minutes for timer

In this way our variable start in 5 minutes, cause every minute has 60 seconds, with clean code rules we use this equation to have the value amount in seconds.

Timer

To start this timer we need a react function, that we'll name Timer(), we need this function because every hook must be inside a react function to work.

So our code is like that:

import { useEffect, useState } from "react";

const COUNTDOWN_AMOUNT_TOTAL = 5 * 60; // 5 minutes for timer

export function Timer(){

const [seconds, setSeconds] = useState<number>(COUNTDOWN_AMOUNT_TOTAL);

}

Here we create our function and create our state variable for the seconds amount, and started them with our start value, the start value variable is create outside our function just to when the code runs that value will be mount just one time and not be recreated every time that the useEffect() changes.

How we need to update the state every second we'll use the useEffect() :

import { useEffect, useState } from "react";

const COUNTDOWN_AMOUNT_TOTAL = 5 * 60; // 5 minutes for timer

export function Timer(){

const [seconds, setSeconds] = useState<number>(COUNTDOWN_AMOUNT_TOTAL);

useEffect(()=>{
    if(seconds > 0){
        // +1 second
    } else {
        // stop
    } 
}, [seconds])

}

Inside our useEffect() we have a condition that should make our time pass while our seconds amount is more than 0, and when this amount turns into 0 it should stop the count.

Just to make the code optimized we'll include another variable outside the main function called timeout:

import { useEffect, useState } from "react";

let timeout: NodeJS.Timeout;
const COUNTDOWN_AMOUNT_TOTAL = 5 * 60; // 5 minutes for timer

export function Timer(){

const [seconds, setSeconds] = useState<number>(COUNTDOWN_AMOUNT_TOTAL);

useEffect(()=>{
    if(seconds > 0){
        timeout = setTimeout(() => {
        setSeconds((state) => state - 1);
      }, 1000);
    } else {
        clearTimeout(timeout);
    } 
}, [seconds])

}

Now our timer is already working, counting precisaly every second, because in the function setTimeout() we set a arrow function that changes the state of seconds every 1000 miliseconds (1 second), this will happen every time that seconds is changed, because we passed seconds as params for the useEffect(() => {}, [seconds]), when it comes to 0 with the clearTimeout() the timer will stop.

Just because i'm usign typescript i needed to declare the types of every varibale.

Refining

After create the timer we see that it is only a countdown in seconds, and it is never shown in screen, how can we show this in screen and separate minutes from seconds?

If every minute has 60 seconds we just need of 2 equations:

import { useEffect, useState } from "react";

let timeout: NodeJS.Timeout;
const COUNTDOWN_AMOUNT_TOTAL = 5 * 60; // 5 minutes for timer

export function Timer(){

const [seconds, setSeconds] = useState<number>(COUNTDOWN_AMOUNT_TOTAL);

const displaySeconds = seconds % 60;
const displayMinutes = Math.floor(seconds / 60);

useEffect(()=>{
    if(seconds > 0){
        timeout = setTimeout(() => {
        setSeconds((state) => state - 1);
      }, 1000);
    } else {
        clearTimeout(timeout);
    } 
}, [seconds])

}

To show the minutes we need to divide the seconds by 60 and because this division can be a uneven number we need to use the function Math.floor() that returns only the number before the comma.

To show the seconds we need the rest of this dvision, and to take the rest we need the operator %, the rest of this division is the seconds in that specific minute.

Now is possible to take this varibles and put in the screen:

import { useEffect, useState } from "react";

let timeout: NodeJS.Timeout;
const COUNTDOWN_AMOUNT_TOTAL = 5 * 60; // 5 minutes for timer

export function Timer(){

const [seconds, setSeconds] = useState<number>(COUNTDOWN_AMOUNT_TOTAL);

    const displaySeconds = seconds % 60;
    const displayMinutes = Math.floor(seconds / 60);

    useEffect(()=>{
        if(seconds > 0){
            timeout = setTimeout(() => {
            setSeconds((state) => state - 1);
          }, 1000);
        } else {
            clearTimeout(timeout);
        } 
    }, [seconds]);

    return(
        <>
            <h1>{displayMinutes}</h1>
            <p>:</p>
            <h1>{displaySeconds}</h1>
        </>
    )

}

Conclusion

We learn the concept to create a timer;
We saw how we can use useState() and useEffect() hooks to update the data.
Learned about setTimeout() to pass the time with accuracy.
And finally we build a countdown timer.

Hope this have helped you and do not be limited by only what's written in here, be creative and use this to expand your knowledge.