web-dev-qa-db-ja.com

Next JsカスタムルートとSSR

次と最近アポロを使用していますが、カスタムルートがSSRを壊すことに気づきました。通常、ページをナビゲートすると、apolloはクエリをキャッシュし、次にページにアクセスしたときに、キャッシュからすべてを提供します。ただし、カスタムルートでは、キャッシュは使用されません。

これらのページをクリックすると、コンソールでエラーが点滅することにも気付きました。しかし、それは非常に速く消え、私はそれをここにコピーすることができませんでした。

Server.js

// 
   server.get('/about-us', (req, res) => app.render(req, res, '/about'));


   server.get('/about', (req, res) => res.redirect(301, '/about-us'));

メニュークリックハンドラー

const navigate = link => () => {
        Router.Push(link);
    };

メニュー項目

export const menu = [
    {
        name: 'Home',
        url: '/',
    },
    {
        name: 'Catalogs',
        url: '/catalogs',
    },
    {
        name: 'Shop',
        url: '/shop',
    },
    {
        name: 'Wholesale',
        url: '/wholesale',
    },
    {
        name: 'About Us',
        url: '/about-us',
        prefetch: true,
    },
    {
        name: 'Contact Us',
        url: '/contact-us',
        prefetch: true,
    },
];

Nextjsスペクトルからの提案に基づいて、TopNavコンポーネントでカスタムページをプリフェッチしようとしましたが、機能しませんでした。

const prefetch = url => {
        if (process.browser) {
            console.log('prefetching these urls', url);
            Router.prefetch(url);
        }
    };

    useEffect(() => {
        menu.forEach(menuItem => {
            if (menuItem.prefetch) {
                prefetch(menuItem.url);
            }
        });
    }, []);
javascriptnode.jsexpressreact-apollonext.js
14
Yasin Yaqoobi

私は問題を理解することができました。これは十分に文書化されていませんが、コンポーネントをプリフェッチする必要があります。したがって、私の場合、/about-usをプリフェッチする代わりに、/aboutをプリフェッチする必要がありました。

リンクコンポーネントにasプロップがあるのはそのためです。 Nextjs 9がリリースされ、この問題が修正されました。

https://nextjs.org/blog/next-9#dynamic-route-segments

Nextjs 9の場合、ファイルを[pid] .jsとして保存すると、特定のルートのすべてのパスをキャッチします。つまり、/products/test-productの場合は、フォルダー製品を作成し、その中に[pid].jsを追加する必要があります。

Slugに基づいて製品を照会する必要があったので、これと出来上がりを追加しました。コンポーネント内のslugにアクセスできます。

Product.getInitialProps = async ({ query }) => {
    return { slug: query.pid };
};

これらの問題は、次の9年まではかなり苛立たしいものでしたが、大幅に簡略化され、server.jsを完全に削除するのに役立ちました。

4
Yasin Yaqoobi