我试图使我的网页搜索引擎优化友好使用getServerSideProps方法。我曾试图谷歌它,但无法找到任何具体的例子,我的情况下。我不知道如何做到这一点。我有一个useEffect方法目前。
import Header from './Header.js';
import Footer from './Footer.js';
import React, { Component, useState, useEffect } from 'react';
import Link from 'next/link';
import { useParallax, ParallaxBanner } from "react-scroll-parallax";
import { useTranslation } from "react-i18next";
import axios from "axios";
//import { Link, useLocation } from 'react-router-dom';
import Post from "./Post";
function Article({postSlug}) {
const { t, i18n } = useTranslation();
const [post, setPost] = useState([]);
const [posts, setPosts] = useState([]);
const currentlocale = typeof window !== 'undefined' ? localStorage.getItem('locale') : null;
useEffect(() => {
if(postSlug){
axios({
method: "POST",
url: process.env.NEXT_PUBLIC_API_URL + '/pages/article',
headers: { 'Content-Type': 'application/json;charset=UTF-8', "Access-Control-Allow-Origin": "*", "Accept": "application/json" },
data: {
country: currentlocale,
slug: postSlug
}
}).then(result => {
setPost(result.data.json.article);
setPosts(result.data.json.articles);
});
}
}, [postSlug])
return (
<div id="web-front">
<Header />
{post.title}
<Footer />
</div>
)
}
export default Article;
1条答案
按热度按时间oiopk7p51#
getServerSideProps
仅在/pages
文件夹内创建的路线/文件上运行。getServerSideProps
函数。getServerSideProps
接收的context.req
[1]对象中获取postSlug
。cookies
替换localStorage
,因为cookies
在context.req
对象上可用。[2]参考: