Next.js + Firebase 实现服务器端渲染-JavaScript中文网-JavaScript教程资源分享门户

前端开发已经从简单的静态网页渲染到了前端渲染，服务端渲染，甚至是单页应用。这种趋势让我们的应用具备了更好的可维护性和性能，特别是在将来应用的扩展中。但是在实现这一点时，与之相关的技术也会变得越来越复杂。

在本文中，我将向您展示如何将Next.js和Firebase结合使用来实现服务器端渲染。我们还将讨论一些前端工程师需要了解的内容，以及如何通过一个示例来模拟实现。

第一步：项目准备

我们需要至少两个东西来开始这个项目：

一个 Next.js 应用程序。
一个 Firebase 帐户。

如果您还没有安装Next.js，请参阅官方文档查看如何安装。我们需要在pages目录下创建一个名为index.js的文件，该文件将显示在我们的根URL上。

接下来，我们需要创建一个Firebase项目并设置应用设置。在控制台上创建一个新项目，并转到“数据库”选项卡。我们将使用Firebase实时数据库来存储我们的数据，因此我们需要在此处设置数据库。

第二步：连接 Firebase

首先，我们需要安装我们的Firebase客户端库。

yarn add firebase

然后，在我们的应用程序根目录中，我们可以创建一个名为firebase.js的新文件，并添加以下代码：

// www.javascriptcn.com code example
import firebase from 'firebase/app';
import 'firebase/database';

const firebaseConfig = {
  apiKey: 'YOUR_API_KEY',
  authDomain: 'YOUR_AUTH_DOMAIN',
  databaseURL: 'YOUR_DATABASE_URL',
  projectId: 'YOUR_PROJECT_ID',
  storageBucket: 'YOUR_STORAGE_BUCKET',
  messagingSenderId: 'YOUR_MESSAGING_SENDER_ID',
  appId: 'YOUR_APP_ID',
};

if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);
}

const database = firebase.database();

export { database };

请确保将YOUR_API_KEY 等信息替换为您自己的Firebase项目信息。现在，我们的Firebase实例已经准备好使用了，我们可以从我们的Pages组件中访问它。

第三步：在 Next.js 中获取数据

在我们的应用程序中，我们已经可以访问 Firebase 数据库。下一步，我们需要从服务端获取数据，并将数据传递给我们的页面。我们可以使用 Next.js 的 getServerSideProps() 方法来在服务器端获取数据。这个函数需要一个参数：请求对象（req）。

// www.javascriptcn.com code example
import { database } from '../firebase';

export async function getServerSideProps() {
  const ref = database.ref('posts');
  const snapshot = await ref.once('value');
  const postsObject = snapshot.val();
  const postsList = Object.keys(postsObject).map((key) => ({
    ...postsObject[key],
    id: key,
  }));

  return { props: { postsList } };
}

上述代码将在服务器上执行，并从Firebase数据库中获取我们的帖子数据列表。收到数据后，我们将使用Object.keys()方法将数据映射到数组中。在这个示例中，我们假设每篇文章都是对象，对象中包含名称，内容和时间戳。这样我们就可以像下面这样在页面上显示它们：

// www.javascriptcn.com code example
export default function Home({ postsList }) {
  return (
    <div>
      {postsList.map((post) => (
        <div key={post.id}>
          <div>{post.title}</div>
          <div>{post.content}</div>
          <div>{post.timestamp}</div>
        </div>
      ))}
    </div>
  );
}

现在，我们可以从Firebase获取数据并将其向用户展示。

第四步：如何在本地运行

if (!firebase.apps.length) { firebase.initializeApp(firebaseConfig); }


如果你想在你的本地开发环境中验证你的服务端渲染是否工作起来了，可以运行下面的命令进行本地测试

yarn dev

## 小结

通过使用`Next.js`和`Firebase`，我们可以实现服务器端渲染，并通过一个示例来理解它。随着前端技术的发展，我们相信不久之后，服务端渲染、单页应用等技术将得到普及，并越来越为广大开发者所使用。

> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/67d80f0fa941bf7134e654be) ，转载请注明来源
[https://www.javascriptcn.com/post/67d80f0fa941bf7134e654be](https://www.javascriptcn.com/post/67d80f0fa941bf7134e654be)

Next.js + Firebase 实现服务器端渲染

第一步：项目准备

第二步：连接 Firebase

第三步：在 Next.js 中获取数据

第四步：如何在本地运行

接着读