El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

Introducció

La renderització del costat del servidor (SSR) és una tècnica que permet generar el contingut HTML d'una pàgina web al servidor en lloc de fer-ho al client. Això pot millorar el rendiment de l'aplicació i l'experiència de l'usuari, especialment en termes de SEO i temps de càrrega inicial. Next.js és un framework de React que facilita la implementació de SSR.

Objectius

En aquest tema, aprendràs:

Què és la renderització del costat del servidor (SSR).
Com configurar un projecte Next.js.
Com implementar SSR amb Next.js.
Avantatges i desavantatges de SSR.

Què és la renderització del costat del servidor (SSR)?

La renderització del costat del servidor (SSR) implica generar el contingut HTML d'una pàgina web al servidor i enviar-lo al client. Això contrasta amb la renderització del costat del client (CSR), on el navegador del client genera el contingut HTML utilitzant JavaScript.

Avantatges de SSR

Millora del SEO: Els motors de cerca poden indexar millor les pàgines generades al servidor.
Temps de càrrega inicial més ràpid: Els usuaris poden veure el contingut més ràpidament perquè el HTML ja està generat.
Millor experiència d'usuari: Els usuaris veuen contingut significatiu més ràpidament, millorant la percepció de la velocitat de l'aplicació.

Desavantatges de SSR

Major càrrega al servidor: El servidor ha de generar el HTML per a cada sol·licitud.
Complexitat: La implementació de SSR pot ser més complexa que CSR.

Configuració d'un projecte Next.js

Instal·lació de Next.js

Per començar amb Next.js, primer has d'instal·lar-lo. Pots fer-ho utilitzant npx:

npx create-next-app my-next-app
cd my-next-app

Això crearà un nou projecte Next.js anomenat my-next-app.

Estructura del projecte

Un projecte Next.js típic té la següent estructura:

my-next-app/
├── pages/
│   ├── index.js
│   └── _app.js
├── public/
├── styles/
├── package.json
└── next.config.js

pages/: Conté els components de pàgina. Cada fitxer dins d'aquesta carpeta es converteix en una ruta.
public/: Conté recursos públics com imatges.
styles/: Conté fitxers CSS.
package.json: Conté les dependències del projecte.
next.config.js: Configuració personalitzada per a Next.js.

Implementació de SSR amb Next.js

Pàgines amb SSR

Per implementar SSR en una pàgina, utilitzem la funció getServerSideProps. Aquesta funció s'executa al servidor cada vegada que es fa una sol·licitud a la pàgina.

// pages/index.js
import React from 'react';

const Home = ({ data }) => {
  return (
    <div>
      <h1>SSR amb Next.js</h1>
      <p>{data.message}</p>
    </div>
  );
};

export async function getServerSideProps() {
  // Aquí pots fer crides a API o altres operacions del servidor
  const data = { message: 'Hola des del servidor!' };

  return {
    props: {
      data,
    },
  };
}

export default Home;

Explicació del codi

Home: És un component React que rep data com a prop.
getServerSideProps: Aquesta funció s'executa al servidor abans de renderitzar la pàgina. Retorna un objecte amb una propietat props que es passa al component.

Exemple pràctic

Suposem que volem mostrar una llista de publicacions des d'una API externa:

// pages/posts.js
import React from 'react';

const Posts = ({ posts }) => {
  return (
    <div>
      <h1>Publicacions</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
};

export async function getServerSideProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();

  return {
    props: {
      posts,
    },
  };
}

export default Posts;

Explicació del codi

Posts: És un component React que rep posts com a prop.
getServerSideProps: Fa una crida a una API externa per obtenir les publicacions i les passa al component com a prop.

Exercicis pràctics

Exercici 1: Implementar SSR per a una pàgina de detalls

Crea una pàgina post/[id].js que mostri els detalls d'una publicació específica utilitzant SSR.

Solució

// pages/post/[id].js
import React from 'react';

const Post = ({ post }) => {
  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </div>
  );
};

export async function getServerSideProps({ params }) {
  const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${params.id}`);
  const post = await res.json();

  return {
    props: {
      post,
    },
  };
}

export default Post;

Explicació del codi

Post: És un component React que rep post com a prop.
getServerSideProps: Utilitza params per obtenir l'ID de la publicació des de la URL i fa una crida a l'API per obtenir els detalls de la publicació.

Resum

En aquest tema, has après:

Què és la renderització del costat del servidor (SSR) i els seus avantatges i desavantatges.
Com configurar un projecte Next.js.
Com implementar SSR amb Next.js utilitzant la funció getServerSideProps.
Has practicat amb exemples pràctics per consolidar els teus coneixements.

Ara estàs preparat per explorar més funcions avançades de Next.js i SSR en els teus projectes React.

Renderització del costat del servidor (SSR) amb Next.js

Introducció

Objectius

Què és la renderització del costat del servidor (SSR)?

Avantatges de SSR

Desavantatges de SSR

Configuració d'un projecte Next.js

Instal·lació de Next.js

Estructura del projecte

Implementació de SSR amb Next.js

Pàgines amb SSR

Explicació del codi

Exemple pràctic

Explicació del codi

Exercicis pràctics

Exercici 1: Implementar SSR per a una pàgina de detalls

Solució

Explicació del codi

Resum

Curs de React

Mòdul 1: Introducció a React

Mòdul 2: Components de React

Mòdul 3: Treballar amb esdeveniments

Mòdul 4: Conceptes avançats de components

Mòdul 5: Hooks de React

Mòdul 6: Enrutament en React

Mòdul 7: Gestió de l'estat

Mòdul 8: Optimització del rendiment

Mòdul 9: Proves en React

Mòdul 10: Temes avançats

Mòdul 11: Projecte: Construir una aplicació completa