Server Side vs Static Generation og litt om klient-rendering

Server-side rendering

NextJs har hovedsaklig to måter å pre-rendre en side - server-side rendring (SSR) og statisk-generering (SSG). Ved SSR vil en gitt side bli rendret per forespørsel. Det vil si at når en bruker henter siden vil getServerSideProps og JSX-en kjøres for hver gang. SSG vil i rendre ved et initiellt bygg, samt ved regenerering (ISR eller Incremental Static Regeneration).

Boilerplate for en typisk SSR-side vil se slik ut:

1import {GetServerSidePropsContext, GetServerSidePropsResult, InferGetServerSidePropsType} from "next";
2
3type SSRResult = { bananer: string }
4
5export const getServerSideProps = async ({ req, res }: GetServerSidePropsContext<{}>): Promise<GetServerSidePropsResult<SSRResult>> => {
6  return {
7    props: {
8      bananer: "i lange baner"
9    }
10  }
11};
12
13export default function EksempelSSR(props: InferGetServerSidePropsType<typeof getServerSideProps>) {
14  return <pre>{JSON.stringify(props, undefined, 4)}</pre>
15}

Legg merke til at vi her har tilgang til selve forespørselen og responsen (req og res). Det vil si at vi kan legge en SSR-side bak innlogging eller ha diverse personalisert data der. Det vil ikke være mulig med en SSG-side, med mindre vi tyr til klientside-rendring i tillegg.

Et eksempel på en statisk generert side kan vi se i artikkelen “Eklempel på en enkel statisk-generert side”.

Utover disse to variantene kan vi også bruke helt vanlig klient-side rending som de fleste React-utviklere er kjent med. Det vil si klient-side fetching og det som måtte høre med. Gjør man dette derimot vil man med en gang være avhengig av at brukeren har slått Javascript på i nettleseren og alle ulempene i forhold til indeksering og hastighet vil da bli gjeldende - slik som vanlig klient-side React-kode vil være.

Les mer her

Statisk generering

Et eksempel på en statisk generert side kan vi se i artikkelen “Eksempel på en enkel statisk-generert side”.

Klientside rendring

Utover disse to variantene kan vi også bruke helt vanlig klient-side rending som de fleste React-utviklere er kjent med. Det vil si klient-side fetching og det som måtte høre med. Gjør man dette derimot vil man med en gang være avhengig av at brukeren har slått Javascript på i nettleseren og alle ulempene i forhold til indeksering og hastighet vil da bli gjeldende - slik som vanlig klient-side React-kode vil være.

Les mer her