Netlify & Next.js | CSS-Tricks

Cassidy Williams 在 Netlify 博客上进行了一个名为 Blogvent（一个月每天写博客）的活动。许多博文都与 Next.js 相关。 Next.js 确实有很多值得喜欢的地方。我只是出于兴趣提取了 Cassidy 的一个入门项目。非常棒的是，它内置了 React Fast-Refresh。我喜欢在任何给定的“页面”上，你都可以导入并使用一个 <Head> 来控制本应在 <head> 中的内容。这是我第一次使用 Next，所以请原谅我的基础性操作。

但对我来说，Next.js 最引人入胜的地方在于它多么容易支持整个渲染范围。它默认鼓励你进行静态文件渲染（明智之举），然后如果需要进行服务器端渲染（SSR），你只需更新任何给定的页面组件以包含以下内容：

export async function getServerSideProps() {
  // Fetch data from external API
  const res = await fetch(`https://.../data`)
  const data = await res.json()

  // Pass data to the page via 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 上运行真是太棒了。

评论