GetServerSideProps 및 Next/Image로 Next.js 앱 성능 향상

export interface Post {

identifier: string

title: string

body?: string

slug: string

subName: string

username: string

createdAt: string

updatedAt: string

sub?: Sub

mediaLink?: string

bodyPreview?: string

url: string

voteScore?: number

commentCount?: number

userVote?: number

}

클라이언트에서 데이터 가져오기

const [posts, setPosts] = useState<Post[]>([])

useEffect(() => {Axios.get('/posts').then((res)=>setPosts(res.data)).catch((err) => console.log(err))}, [])

{posts?.map((post)=>(<PostPreview post={post} key={post.identifier}/>))}

<img src={mediaLink}/>

서버에서 데이터 가져오기

먼저 클라이언트 측에서 사용되는 Axios 함수를 Next.js 내장 함수 GetServerSideProps

import { GetServerSideProps } from 'next'

export const getServerSideProps: GetServerSideProps = async (context) => {try {

const res = await Axios.get('/post')
return { props: { posts: res.data } }
} catch (err) {

return { props: { error: 'Something went wrong' }}
}}

게시물 구성 요소에서는 대신 다음/이미지 구성 요소를 사용합니다.

<Image src={mediaLink} width={16} height={16} layout="responsive"/>

그러나 그들은 정확히 무엇을 하는가

GetServerSideProps 각 요청에 대한 데이터를 가져와서 서버에서 렌더링한 다음 클라이언트로 보냅니다.

대신 이미지가 필요한 이유

Next/Image를 사용하는 이미지는 항상 Google이 웹 검색 순위에 사용하는 Cumulative Layout Shift, a Core Web Vital 및 Next.js에 따른 자동 이미지 최적화를 피하는 방식으로 렌더링되기 때문입니다

그래서 서버에 데이터를 로드하는 페이지와 클라이언트에 페이지를 로드하는 두 개의 페이지가 있으므로 두 경로를 모두 테스트하기 위해 PageSpeed insights를 사용했습니다.

시험 결과

https://notus-client.vercel.app/과 https://notus-client.vercel.app/serverside을 모두 분석했습니다

서버 측 렌더링에서 가장 많은 이점을 얻을 수 있는 유일한 플랫폼인 모바일에서 약 9–14포인트 증가

결과에서 알 수 있듯이 서버 측 접근 방식은 점수가 약 15%에서 20%로 증가했습니다. 이는 이 접근 방식이 앱이 앞으로 나아가는 데 더 낫다는 것을 증명합니다.

원하는 경우 테스트를 실행할 수 있습니다

• https://notus-client.vercel.app/

• https://notus-client.vercel.app/serverside

GitHub의 소스 코드: https://github.com/mage1711/Notus-client