使用Next.js获取唯一数据的更优方案探讨

1. 提前获取window.location（无需等待页面加载） #

window.location在页面生命周期的早期阶段就已可用，不需要等到DOM或页面完全加载。你可以把获取路径的脚本放在<head>标签里（无需包裹在DOMContentLoaded或load事件中），就能直接拿到路径值：

// 直接在<head>里执行这段代码，无需等待页面加载
const path = window.location.pathname;
const postId = path.replace(/^\/post\//, ''); // 用正则替换比substring更灵活，适配路径变化
if (postId) {
  // 立即调用API
  fetch(`/api/posts/${postId}`)
    .then(res => res.json())
    .then(data => console.log(data));
}

2. 使用URL API优雅解析路径 #

用浏览器原生的URL对象解析路径，比手动截取更可靠，尤其是路径结构有变化时：

const url = new URL(window.location.href);
const pathSegments = url.pathname.split('/').filter(segment => segment); // 过滤空字符串
// 假设路径结构是/post/1，那么pathSegments[1]就是postId
if (pathSegments[0] === 'post' && pathSegments[1]) {
  const postId = pathSegments[1];
  fetch(`/api/posts/${postId}`).then(/* 处理返回数据 */);
}

3. 前端框架场景：利用路由内置能力 #

如果你用React、Vue这类框架，直接用框架的路由API获取参数，完全不用自己解析路径：

• React（React Router）：

import { useParams } from 'react-router-dom';
import { useEffect } from 'react';

function PostPage() {
  const { id } = useParams(); // 直接拿到路由参数id
  // 组件挂载时调用API
  useEffect(() => {
    fetch(`/api/posts/${id}`).then(/* 处理返回数据 */);
  }, [id]);
}

• Vue：

// Vue 3 Composition API
import { useRoute } from 'vue-router';

const route = useRoute();
const postId = route.params.id; // 直接获取id
// 调用API
fetch(`/api/posts/${postId}`).then(/* 处理返回数据 */);

4. 服务器渲染（SSR）场景：提前注入ID #

如果是服务器渲染的页面，可以在服务器端先解析URL路径，把postId直接注入到页面的全局变量中，前端直接使用：

<!-- 服务器渲染的HTML中注入全局变量 -->
<script>
  window.__INITIAL_POST_ID__ = '<%= postId %>'; // 服务器模板语法替换为实际ID
</script>

前端直接用：

const postId = window.__INITIAL_POST_ID__;
if (postId) {
  fetch(`/api/posts/${postId}`).then(/* 处理返回数据 */);
}

内容的提问来源于stack exchange，提问作者Ekofi Capital