Curso Next. Js - Aula 1 - Renderização por parte do Servidor ( SSR )

 O que é o Next. Js?

O Next.js é um framework de React para criar aplicativos da Web. 

Vantagens?

As principais são a Renderização do Lado do Servidor ( SSR), pré-renderização e roteamento simplificado. 

O que é a Renderização do lado do servidor ( SSR)?

"Server Side Rendering (SSR) é a capacidade de um aplicativo de contribuir exibindo a página da Web no servidor em vez de no navegador." - Fonte

Isso quer dizer que quando você acessa um site feito em next.js, o servidor mostra a página que você quer ver lá no site, ou seja, ele gera o HTML com tudo o que tem na página, e envia para o navegador.  E por que isso é importante? porque o conteúdo é exibido rapidamente, melhora a velocidade inclusive em conexões lentas. O Next.js facilita a implementação do SSR em aplicativos Web React. 

Exemplo de como implementar a renderização por parte do servidor ( SSR)

// pages/index.js

import React from 'react';

// Este é um componente de página simples

const HomePage = ({ data }) => {

  return (

    <div>

      <h1>Página Inicial</h1>

      <p>Dados do servidor: {data}</p>

    </div>

  );

};

Explicando: 

// Esta função é executada no servidor antes de renderizar a página

export async function getServerSideProps() {

  // Simula uma chamada à API ou à base de dados

  const data = 'Dados do servidor';

  // Retorna os dados como props

  return {

    props: {

      data,

    },

  };

}

export default HomePage;