nextjs ssr 관련

안녕하세요. nextjs로 react로 사이트 구축중에 있습니다. 도메인별로 meta tag가 달라지는데 "getServerSideProps"로 매태태크 정보를 가져와서 head에 넣어줘도 브라우저에서는 타이틀을 랜더링하나 카카오톡에서는 적용이 안되고 있는데 혹시 방법을 아시는 분 계실까요? 몇일째 삽질하는 느낌이네요 next-seo로도 ssr 랜더링 해봐도 소스에 노출되는 meta 태그는 없고.ㅜㅜ _document.txt는 도메인을 기준으로 서버 api 호출하는데 도메인을 인식하지 못하고 어렵네요. 혹시 아시는 분 계시면 도움부탁드립니다. 감사합니다.

NextJS에서 Component 호출 할 때 getServerSideProps 호출 방법이 있나요?

JSTL 이나 Thymeleaf 하다가 NextJS 하려니 많이 해메고 있네요. @,@;;; 우선 시나리오는 ProductList.html 페이지에서 서버로부터 상품 목록 주욱 받아 화면 출력 하는 것 까지는 했어요. 이때 서버 목록은 getServerSideProps 함수에서 받아 처리 했구요. 이제 상품 이름 클릭 했을 때 상세 정보를 Layer 화면으로 띄우려는데 그게 잘 안되네요. Thymeleaf에선 해당 페이지만 빌드 돼 html 형태로 받아 올 수 있었는데 nextjs는 어떻게 해야 하는지 모르겠어요. // 상품 상세 내용 export default function ProductModalLayer({ product }:IProduct) { return (<div> {product.name}</div>); } export async function getServerSideProps(context: any) { // 서버 통신으로 product 상세 정보 전달 const data = ... 생략... return { props: { product: data, }, }; } ------ ProductList 부분에서 상품 이름을 클릭 했을 때 const ModalView = dynamic(() => import("../ProductModal.layer")); // 선언 ... // 화면 그리기 <ModalView seq={prod.productSeq}></ModalView> 이런 형식으로 호출 하니까 getServerSideProps를 호출 하지 않네요. 다른 방법으로 fetch를 이용해 호출 해 봤는데 const res = await fetch("/ProductModal.layer?seq=" + seq); const content = await res.text(); 이렇게 하면 getServerSideProps를 호출 하지만 html Tag가 엄청 붙어 나오고 return 의 결과가 아닙니다. getServerSideProps를 고집 하는 이유는 서버 호출 인터페이스는 꼭 서버에서 이뤄지게 하고 싶어서에요. 브라우져 디버거로 노출 안되게 하고 싶어서. 힌트나 방법좀 부탁 드려요~ 다시 JSTL 이나 Thymeleaf로 돌아 갈 수 없어~~~~

react 서버 컴포넌트 SEO 성능 차이있나요?

react 18 서버 컴포넌트가 서버에서 컴포넌트를 html로 렌더할 수 있는 것으로 알고 있는데요. SEO 관점에서 크롤봇이 서버 컴포넌트가 있는 페이지를 크롤링하는 경우, 서버 컴포넌트의 데이터를 받아오기 전까지는 loading 상태를 보여주는건가요? 기존 next에서 하던 SSR 보다 서버 컴포넌트로 구성하는게 SEO 관점에서 더 뛰어난가요?

SSR + CSR 를 같이 하는 웹 어플리케이션의 장점은 SEO 가 전부 인가요?

SSR + CSR 을 사용하는 이점이 SEO 말고는 없다고 생각하는데 맞나요? (잘못 알고 있는 내용이 있으면 알려주세요.) SSR 은 서버를 통해서 데이터를 로드하고 렌더링을 하는 초기 로딩 시간이 있고, Node.js 서버를 따로 띄워야 하는 복잡성도 늘어나고 CSR 은 순수한 필요한 HTML, JS 만 로드해서 클라이언트에서 바로 렌더링 되고 캐시를 활용해서 파일을 더 빠르게 보내주는 방법도 많을 것 같아요. 또한 복잡한 서버 구성이 없어서 구현하는 비용도 더 낮을 것 같고요. 그래서 대부분의 상황에서는 CSR 이 훨씬 유리하다고 생각되고 SEO 를 위해서 두가지를 조합해서 렌더링하는 프레임워크가 생겨났다고 생각합니다. 혹시 제가 모르는 추가적인 장점이 있을까요?

Next.js에서 전역 미들웨어를 사용할 때

최근에 next.js를 공부하면서 간단한 프로젝트를 만들고 있습니다. 그러다 생긴 궁금점인데 전역 미들웨어를 사용하면 .next/server/pages 안에 페이지.js파일이 생성 안되던데 그러면 SSR이 안되고 있는건가요? 아님 다른 방식으로 SSR이 되고 있는건가요?

Nextjs의 ssr, ssg, isr을 각각 언제 적용하는게 좋을지 기준과 구체적인 예시가 궁금합니다.

ssg : 빌드 때 정적 파일 생성해 빠르게 전달 가능하지만 다시 빌드할 때 까지 변경이 불가능하다. isr : 임의의 주기마다 재빌드 가능하지만 그 주기를 특정하기 어렵다. ssr : 깜빡임 없이 매 요청 마다 정적 파일을 만들어서 보내주지만 서버 요청 시간이 길어지면 사용자가 흰 화면을 오래 보게 된다. 제가 공부하면서 느낀 세가지 렌더링 방식의 장단점입니다. SEO가 필요 없고 초기에 데이터를 패칭해 반영하는 페이지가 있다고 했을 때, csr이 아닌 굳이 이것들을 적용해야 할 상황이 있을까 하는 생각이 듭니다. 흔히 예시로 드는 아주 명확한 상황이 아닌, 실무에서 적용해보시고 효과를 거둔 케이스와 판단 기준이 궁금합니다.

Next.js SSR + react-query 조합에서의 일반적인 페이지네이션 렌더링 방식

안녕하세요, Next.js SSR + react-query hydration 조합으로 페이지네이션을 구현하려고 합니다. 핵심 궁금증은 일반적으로 SSR을 구성할 때, 첫 페이지만 SSR을 적용하고 2페이지부터는 CSR로만 돌아가게 하나요? 아니면 모든 페이지를 SSR로도 돌아갈 수 있게 구성을 하나요? 예컨대 커리어리 개발자 Q&A 메뉴는 첫 페이지만 SSR을 적용하고 2페이지(스크롤링)부터는 CSR로만 돌아가게 구성을 한 것 같습니다만, 사실 어떤 선택이든 Trade Off가 있겠으나 일반적으론 어떻게 구성하는지가 궁금하네요!

Next.js SSR + react-query 조합에서의 serializing 에러

안녕하세요! Next.js SSR + react-query 조합을 사용하려고 하는데요, page 컴포넌트 내 getServerSideProps 함수에서 prefetching을 받아온 후에 serializing 에러가 발생합니다. (Next.js는 13버젼입니다.) 에러 내용은 다음과 같습니다. Error: Error serializing `.dehydratedState.queries[0].state.data.headers` returned from `getServerSideProps` in "/top". Reason: `object` ("[object AxiosHeaders]") cannot be serialized as JSON. Please only return JSON serializable data types. 해당 에러 내용으로 구글링을 해보니, 대부분 getServerSideProps 함수 반환 코드에서 return { props: { dehydratedState: JSON.parse(JSON.stringify(dehydrate(queryClient))), }, }; 와 같이 dehydrate(queryClient)값을 JSON화 -> Object화를 하라고 하는데요, 이와 같이 사용해도 또 다시 아래와 같은 에러가 납니다. TypeError: Converting circular structure to JSON --> starting at object with constructor 'ClientRequest' | property 'socket' -> object with constructor 'Socket' --- property '_httpMessage' closes the circle Backend API는 Express.js를 사용하고 있으며, res.status(200).json({ data: ~ })와 같은 방식으로 응답을 주고 있습니다. 어떻게 해결할 수 있을까요? 코드 첨부가 안되네요, 아래는 page 컴포넌트가 위치한 파일의 전체 코드입니다. import type { ReactElement } from 'react'; import { dehydrate, QueryClient, useQuery } from '@tanstack/react-query'; import { format } from 'date-fns'; import TopMusicContainer from '~containers/TopMusicContainer'; import Layout from '~layouts/Layout'; import type { NextPageWithLayout } from '~pages/_app'; import TopMusicService from '~services/topMusicService'; import * as MusicType from '~types/musicType'; export async function getServerSideProps() { const queryClient = new QueryClient(); await queryClient.prefetchQuery(['fetchTopMusic'], () => { const params: MusicType.ListRequestType = { filter: 'title', keyword: '', page: 1, limit: 25, time: format(new Date(), 'yyyyMMddHH'), }; return TopMusicService.list(params); }); return { props: { dehydratedState: JSON.parse(JSON.stringify(dehydrate(queryClient))), }, }; } const Top: NextPageWithLayout = (): JSX.Element => { const { data, isLoading } = useQuery({ queryKey: ['fetchTopMusic'], queryFn: () => { const params: MusicType.ListRequestType = { filter: 'title', keyword: '', page: 1, limit: 25, time: format(new Date(), 'yyyyMMddHH'), }; return TopMusicService.list(params); }, }); return ( <section> <TopMusicContainer /> </section> ); }; Top.getLayout = function getLayout(page: ReactElement) { return <Layout>{page}</Layout>; }; export default Top;

Next.js SSR에서 token refresh를 어떻게 처리하나요?

access token, refresh token을 cookie에 저장, 사용하는 방식으로 로그인 로직을 작성중입니다. 1. SSR에서 access token으로 로그인 유무를 확인한다. 2. access token이 만료됐다면, refresh 요청을 한다. 3. 새로운 token cookies를 받아온다. 4. 서버에서 새로운 token cookies를 받아왔으니 클라이언트에 token cookies 쿠키를 똑같이 전달해야하는데, 어려움이 있습니다. 해결책이나 혹시 더 좋은 방법이 있으시면 답변 부탁드립니다!