개발 메모장 개발 메모장

SSR

• Next.js로 SEO 최적화하기

  Next.js 2024. 6. 26. 13:23

  Next.js는 빠르고 SEO 친화적인 React 애플리케이션을 구축하기 위한 강력한 프레임워크입니다.서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG) 및 동적 라우팅과 같은 기능을 활용하면 사이트의 SEO 성능을 크게 향상할 수 있습니다.SEO 최적화를 위한 주요 기능1. 서버 사이드 렌더링(SSR)SSR은 페이지를 서버에서 렌더링 하여 검색 엔진에 사전 렌더링된 HTML을 제공합니다.이는 인덱싱을 개선하고 검색 엔진이 콘텐츠를 쉽게 이해하고 순위를 매길 수 있도록 합니다.export async function getServerSideProps() { // API에서 데이터 가져오기 const res = await fetch('https://api.example.com/data'); con..

  Read More
• NextJS Data Fetching (feat. CSR, SSR, SSG, ISR)

  Next.js 2022. 8. 29. 16:43

  1. Data Fetching이란 SPA가 Web 세상에서 새로운 시대를 열었다는 것에 의문을 제시할 사람은 없을 것이다. 기존에 페이지를 이동할 때마다 새로고침이 되며 빈 화면을 봐야 했던 이용자들은 이제 로딩이 없는 것과 비슷한 환경에서 사이트를 사용할 수 있게 되었기 때문이다. 이는 확실히 획기적이었고 대다수의 웹사이트가 이제는 SPA로 되어있고 변화하고 있다. 하지만 SPA에도 치명적인 문제가 있었다. 웹사이트의 운영자들은 어떻게든 네이버나 구글 등의 검색 결과에 자신의 웹사이트가 노출되기를 원하는데 SPA의 경우 페이지를 모두 그린 뒤 데이터를 가지고 오는 CSR방식이 기본이기에 검색 사이트들의 Bot이 웹사이트에 접속했을 때 아무것도 없는 빈 페이지로 판별해 버렸기 때문이다. (물론 최근 구글..

  Read More
• NextJS에서 react-query SSR 데이터 사용하기

  Next.js 2022. 6. 7. 15:18

  react-query는 개인적으로 요즘 가장 핫한 라이브러리라고 생각한다. redux의 thunkAPI 등을 많이 사용했던 이전의 방식에서 react-query를 통해 get과 post방식의 query를 손쉽게 사용할 수 있으면서 데이터를 손쉽게 cache 할 수 있다는 점에서 무척이나 매력적인 라이브러리라고 할 수 있다. nextJS는 요즘에는 react개발자라면 모두 알 정도로 유명한 프레임워크이다. 그리고 nextJS를 유명하게 만든 가장 큰 요소 중 하나는 SSR이라고 생각하는데, 아쉽게도 react-query의 hook의 경우 SSR이 아닌 CSR방식으로 데이터를 가지고 온다. 이제 본격적으로 react-query의 데이터를 SSR로 사용할 수 있는 2가지 방법에 대해 설명하겠다. 1. Init..

  Read More
• NextJS + Redux-Toolkit + next-redux-wrapper 설정하기

  Next.js 2021. 9. 24. 18:33

  해당 글은 next-redux-wrapper@7 버전을 기반으로 작성되었습니다. 해당 방법은 필자 개인이 설정한 방법으로 언제든 더 좋은 방법이 있다면 공유해주시기 바랍니다. NextJS의 큰 장점 중 하나인 SSR을 사용할 때 조금 더 편하게 사용하기 위해 next-redux-wrapper를 이용하여 dispatch를 사용할 수 있게 된다. // testReducer.ts export const initialState = { // ...states } export type TestReducerState = typeof initialState; const testSlice = createSlice({ name: 'user', initialState, reducers: {}, extraReducers: (..

  Read More
• NextJS 외부라이브러리 Error : document(or window) is not defined 해결하기

  Next.js 2021. 9. 6. 16:30

  NextJS로 프로젝트를 하는 중 조금 오래된 라이브러리 등을 이용할 때 NextJS의 ssr 속성 때문에 document나 window가 호출되기 전 라이브러리를 로드해서 에러가 발생하는 경우 무척 간단하게 해결 가능하다. import dynamic from 'next/dynamic' const QuillNoSSRWrapper = dynamic(import('react-quill'), { ssr: false, }) NextJS의 dynamic Import를 이용해 ssr옵션을 끄는 것으로 간단하게 해결 가능하다.

  Read More