Two Forms of Pre-rendering

Publicado 1 enero 2020

Next.js has two forms of pre-rendering: Static Generation and Server-side Rendering. The difference is in when it generates the HTML for a page.

Static Generation is the pre-rendering method that generates the HTML at build time. The pre-rendered HTML is then reused on each request.
Server-side Rendering is the pre-rendering method that generates the HTML on each request.

Importantly, Next.js lets you choose which pre-rendering form to use for each page. You can create a "hybrid" Next.js app by using Static Generation for most pages and using Server-side Rendering for others.

import Layout from '../../layouts/post'
import { getAllPostSlugs, getPostData } from '../../lib/posts'
import Head from 'next/head'
import Date from '../../components/date'
import utilStyles from '../../styles/utils.module.css'
import { GetStaticProps, GetStaticPaths } from 'next'

// Hola 
export default function Post({
  postData
}: {
  postData: {
    title: string
    date: string
    contentHtml: string
  }
}) {
  return (
    <Layout>
      <Head>
        <title>{postData.title}</title>
      </Head>
      <article>
        <h1 className={utilStyles.headingXl}>{postData.title}</h1>
        <div className={utilStyles.lightText}>
          <Date dateString={postData.date} />
        </div>
        <div dangerouslySetInnerHTML={{ __html: postData.contentHtml }} />
      </article>
    </Layout>
  )
}

export const getStaticPaths: GetStaticPaths = async () => {
  const paths = getAllPostSlugs()
  return {
    paths,
    fallback: false
  }
}

export const getStaticProps: GetStaticProps = async ({ params }) => {
  const postData = await getPostData(params.slug as string)
  return {
    props: {
      postData
    }
  }
}

pre[class*="language-"],
code[class*="language-"] {
  color: var(--code-white);
  font-size: 0.8rem;
  text-shadow: none;
  font-family:  Monaco, "Andale Mono", "Ubuntu Mono", monospace;
  direction: ltr;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  line-height: 1.5;
  tab-size: 2;
  hyphens: none;
}

pre[class*="language-"] {
  padding: 1rem;
  border-radius: 0.5rem;
  margin: 0.5em 0;
  overflow: auto;
  background:var(--code-bg);
}

/*********************************************************
* Tokens
*/
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: var(--code-grey);
}

.token.tag > .token.script {
  color: var(--code-white);
}

.token.function,
.token.class,
.token.attr-name,
.token.boolean {
  color: var(--code-yellow);
}

.token.atrule,
.token.attr-value,
.token.keyword,
.token.script > .token.punctuation,
.token.regex,
.token.important,
.token.variable,
.token.operator,
.token.entity,
.token.url {
  color: var(--code-orange);
  font-weght: bold;
}

.token.punctuation,
.token.builtin,
.token.function-variable.function,
.token.class-name,
.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted,
.token.class-name {
  color: var(--code-blue);
}

.token.selector,
.token.string,
.token.char,
.token.inserted {
  color: var(--code-green);
}

.token.tag > .token.punctuation {
  font-weight: lighter;
  opacity: 0.4;
}