Netlify＆next.js

Cassidy Williams最近在Netlify博客上进行了一个为期一个月的每日博客创作活动（Blogvent）。许多博客文章都关于Next.js。Next.js有很多值得称道的地方。我出于兴趣尝试了Cassidy的一个入门项目。它内置了React Fast-Refresh，这一点非常好。我喜欢它在任何“页面”上都可以导入和使用getStaticProps或getServerSideProps来控制原本在.js文件中的内容。这是我第一次尝试Next.js，所以请原谅我的基础操作。但对我来说，Next.js最引人注目的是它轻松支持完整的渲染流程。它默认鼓励你进行静态文件渲染（很聪明），然后如果你需要进行服务器端渲染（SSR），你只需要更新任何给定的页面组件，使其包含以下内容：

export async function getServerSideProps() {
  // 从外部API获取数据
  const res = await fetch(`https://.../data`);
  const data = await res.json();

  // 通过props将数据传递到页面
  return { props: { data } };
}

假设你进行SSR是因为你需要访问服务器获取数据才能渲染页面，但更倾向于在服务器端进行渲染，以便页面能够快速渲染，并在需要时无需JavaScript（这对SEO非常有利）。这假设有一个Node服务器随时准备执行这项工作。在Netlify上，这意味着一个函数（Node Lambda），但你几乎不必考虑它，因为你只需要在你的netlify.toml文件中添加以下内容：

[[plugins]]
  package = "@netlify/plugin-nextjs"

现在，你可以在需要的地方进行静态渲染，在需要的地方进行服务器端渲染，但你也没有放弃客户端渲染，这在网站启动后非常快速。我认为它在内部进行了一些JSON传输或其他框架级别的魔法操作。

我从我的主页设置了一个快速的SSR路由进行测试，我清楚地看到我的主页（静态）和/cool路由（SSR）在加载时都返回静态HTML。

我承认我喜欢使用React，而Next.js是一个非常不错的框架，因为它兼具简单性和强大功能。它能够轻松地在Netlify上运行，这一点很棒。

以上是Netlify＆next.js的详细内容。更多信息请关注PHP中文网其他相关文章！