Next.js 13 Обновление состояния компонента SSR после действия

Question

Я впервые изучаю Nextjs и экспериментирую, создавая небольшое веб-приложение, которое позволяет кому-то просто зарегистрироваться, а затем войти в систему. Все работает, кроме одной маленькой проблемы.

На странице вы можете увидеть свой статус. Если вы вошли в систему, он показывает ваше имя пользователя. Если нет, он предоставляет ссылку на страницу входа.

Эта кнопка «Войти» является частью компонента, который является SSR-компонентом.

Проблема в том, что когда вы успешно входите в систему и перенаправляетесь на домашнюю страницу сrouter.push('/'), ссылка «Войти» не заменяется вашим именем пользователя.

Ваше имя пользователя будет отображаться только при обновлении страницы.

Я действительно в недоумении здесь. Единственное решение, которое я могу придумать, это сделатьUserInfoBarклиентский компонент, но тогда мне пришлось бы вручную извлекать сеанс с помощьюfetchвызов.

Нет ли способа решить эту проблему со стороны сервера?

src/app/components/UserInfoBar.tsx

      import React from 'react'
import Link from 'next/link'
import { getSession } from '../../lib/session'

export default async function UserInfoBar() {
    let sessionData = getSession();

    console.log('on the server')
    console.log(sessionData)

    return (
        <div className="flex-grow text-right px-2 py-1 text-white">
            {sessionData ?
                sessionData.username :
                <Link href="/signin" className='px-2 py-1 text-white '>Sign In</Link>}
        </div>
    )
}

src/app/Header.tsx

      import React from 'react'
import Link from 'next/link'
import { Suspense } from 'react';
import UserInfoBar from './components/UserInfoBar'

export default function Header() {
  return (
    <header className='flex justify-center bg-slate-700 mb-7'>
      <div className='flex max-width space-x-4 p-4'>
        <Link href="/" className='px-2 py-1 text-white '>Home</Link>
        <Link href="/decks" className='px-2 py-1 text-white '>Decks</Link>
        <Link href="/signup" className='px-2 py-1 text-white '>About</Link>
        <Suspense fallback={<p>loading...</p>}>
          <UserInfoBar />
        </Suspense>
      </div>
    </header>
  )
}

src/app/page.tsx

      import React from 'react'

export default function Page() {
  return (
    <div>
      <h2 className="text-4xl font-extrabold text-slate-700">Demo</h2>
      <div>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam faucibus erat a gravida ultricies.
    </div>
  )
}

src/app/lib/session.ts

      import { cookies } from 'next/headers';
import jwt from 'jsonwebtoken'

export const getSession = () => {
    const nxtCookies = cookies();

    if (nxtCookies.has('session')) {
        const cookie = nxtCookies.get('session');

        let sessionData = jwt.verify(cookie.value, process.env.ACCESS_TOKEN_SECRET, (err, user) => {
            if (err) return false;
            return user;
        });

        if (sessionData) return sessionData;
    }

    return false;
 }

Answer 1

Перечитывая документы Next.js, я пропустил эту важную часть:

Аннулирование кэша: кэш можно сделать недействительным с помощью . Дополнительные сведения см. в справочнике по API. В будущем мутации автоматически сделают кеш недействительным.

Просто добавлениеrouter.refresh()перед моимrouter.push()Звонок решил проблему.