Next.js의 13번째 반복 버전인 13.4에서는 서버 측 작업을 통해 데이터를 수정하는 기능과 함께 신뢰할 수 있는 애플리케이션 라우터가 도입되었습니다. 이 혁신적인 기능을 통해 서버 구성 요소 내에서만 데이터 조작을 수행할 수 있으므로 애플리케이션의 효율성, 보안 및 전반적인 성능 측면에서 많은 이점을 제공합니다.
서버 측 작업에 대한 이해를 높이고 Next.js 프레임워크 내에서 최신 기능을 활용합니다.
서버 작업이란 무엇인가요?
서버 액션을 활용하면 서버 컴포넌트와 함께 독립형 서버 측 함수를 만들 수 있습니다. 이는 양식 제출을 처리하거나 GraphQL 데이터 조작과 관련된 데이터를 포함한 모든 유형의 데이터 수정에 영향을 미치는 동안 API 경로를 작성할 필요가 없으므로 중요한 발전을 의미합니다.
클라이언트 및 서버 컴포넌트 모두에서 호출할 수 있는 서버 측 함수를 활용할 수 있는 기능은 React 액션의 기반 위에 구축된 최신 버전의 Next.js(버전 13.4)에서 주목할 만한 기능입니다. 이 기능을 구현하면 클라이언트 측 자바스크립트에 대한 의존도가 줄어들고 성능이 향상된 폼을 만들 수 있습니다.
서버 액션 예제
Next.js는 ‘서버 측 렌더링’ 기능을 활용하여 사용자가 프레임워크 내에서 서버 측 작업을 수행할 수 있도록 합니다. 예를 들어 사용자가 블로그 게시물을 제출할 수 있는 양식을 표시하는 Next.js를 사용하여 만든 웹 페이지를 생각해 보겠습니다. 사용자가 양식을 작성하여 제출하면 데이터가 처리를 위해 서버로 전송되고, 그 후 클라이언트에 반환되어 표시됩니다. 이 프로세스는 브라우저의 개입 없이 전적으로 서버 측에서 이루어집니다.
다음은 코드의 가져오기 문입니다:
import Link from "next/link"
import FormGroup from "@/components/FormGroup"
import { revalidateTag } from "next/cache"
import { redirect } from "next/navigation"
다음 코드 조각은 새 글 작성 프로세스와 관련된 것으로, 글의 제목과 콘텐츠를 API로 전송하여 데이터베이스에 데이터를 저장하는 과정을 포함합니다. 이 작업의 기능은 클라이언트의 직접적인 개입 없이 전적으로 서버 측에서 이루어집니다.
async function createPost(data) {
"use server"
const title = data.get("title")
const body = data.get("body")
await fetch("http://127.0.0.1/posts", {
header: {"Content-Type": "application/json"},
method: POST,
body: JSON.stringify({title, body})
})
revalidateTag("posts")
redirect("/")
}
앞서 언급한 함수는 콘텐츠의 제목과 본문을 검색한 후 HTTP POST 요청을 통해 “/posts” 엔드포인트로 전송합니다. 그 후 캐시가 ‘posts’ 태그와 관련된 콘텐츠를 업데이트하도록 강제하고, 그 후 사용자를 다시 홈 페이지로 리디렉션합니다.
새 제목의 글과 그에 첨부된 텍스트에 대한 제출 양식은 아래에서 확인할 수 있습니다.
export default NewPostForm() {
return (
<form action={createPost}>
<div>
<FormGroup>
<label htmlFor="title">Title</label>
<input type="text" name="title" id="title" />
</FormGroup>
</div>
<div>
<FormGroup>
<label htmlFor="title">Body</label>
<textarea type="text" name="body" id="body"> <textarea/>
</FormGroup>
</div>
<div>
<button> Save </button>
</div>
</form>
)
}
현재 양식은 createPost() 함수만으로 구성되어 있어 글 생성 과정과 상관관계가 없는 것처럼 보입니다. createPost 함수에는
코드 전체가 서버에서 작동하며 클라이언트는 이 함수가 작동하는지 알지 못한다는 점에 유의하세요. 이는 폼이 서버 컴포넌트를 구성하고 클라이언트 측에서 동적으로 생성되는 부분이 없기 때문입니다.
“저장” 버튼을 클릭하면 애플리케이션이 “createPost()” 함수를 실행하여 제목과 본문이 제출된 데이터의 형태로 전송되고 이후 보관을 위해 LocalAPI 내에 기록됩니다.
게시물 재검증
`createPost()` 함수의 마지막 섹션에는 다음과 같은 형식의 특정 문이 나타납니다:
revalidateTags("posts")
데이터베이스에서 검색된 기사 목록을 표시하는 “posts” 컴포넌트가 있다고 가정해 보겠습니다. 이러한 기사를 가져오려면 해당 컴포넌트 내에서 “getPosts()” 함수를 활용해야 합니다.
export default async function Posts(){
const posts = await getPosts()
return (
<div>
{posts.map(post => {
<PostCard key={post.id} {...post} />
})}
</div>
)
}
수정된 버전의 코드는 다음과 같이 작성할 수 있습니다: “`php 함수 getPosts($limit) { $args = array( ‘post_type’ => ‘post’, ‘posts_per_page’ => $limit, ‘orderby’ => ‘date’, ‘order’ => ‘DESC’, ‘exclude’ => ”, ‘include’ => ”, ‘format’ => ‘array’, ); query = new WP_Query( $args ); 반환 $query->get_posts(); } “`
async function getPosts() {
const res = await fetch("https://127.0.0.1/posts?sort=title", {
next: {tags: ["posts"], revalidate: 3600 }
})
return res.json()
}
앞서 언급한 기능을 사용하면 서버 컴포넌트 내에서 가져오기 요청에 대한 캐싱 메커니즘을 구현할 수 있습니다. 따라서 이 컨텍스트 내에서 이루어진 각 가져오기 요청은 기본적으로 무기한 저장됩니다. 캐시의 효율적인 관리와 업데이트는 Next.js에서 데이터 검색의 필수적인 측면입니다.
앞서 언급한 코드는 Next.js에 최대 60분(3,600초) 동안 게시물의 데이터를 저장하도록 지시하며, 그 이후에는 정보가 오래된 것으로 간주되어 Next.js가 기본 데이터베이스에서 검색을 갱신하여 게시물의 최신 업데이트 정보에 액세스할 수 있도록 합니다.
`createPost()` 함수는 작업을 완료한 후 `revalidateTag(“posts”)` 작업을 호출하여 새로 생성된 게시물을 포함하여 “posts” 태그에 대한 최신 데이터를 Next.js에서 검색하도록 보장합니다.
코드가 서버에서 실행되고 있다는 증거
모든 코드가 클라이언트의 브라우저가 아닌 서버에서 실행되도록 하려면 다음과 같이 createPost() 함수 내에 콘솔 로그 문을 포함시키는 것이 좋습니다:
console.log("Running on the server")
제공된 코드를 실행하면 코드가 서버에서 실행되는지 클라이언트에서 실행되는지에 따라 터미널 또는 웹 브라우저 콘솔에 로그 메시지가 표시될 수 있습니다.
이 방법을 사용하면 환경 변수, 데이터베이스 연결 및 비밀번호와 같은 민감한 데이터를 보호할 수 있으므로 클라이언트에 노출될 가능성을 제거할 수 있습니다. 해당 데이터는 Next.js 애플리케이션의 .env 파일에서 얻을 수 있습니다.
Next.js 버전 13.4 이하에서 서버 측 작업을 사용하는 것은 프로덕션 환경에서는 권장되지 않습니다. 그러나 이 기능은 계속해서 기능이 확장되고 있어 클라이언트 애플리케이션을 최적화하고 개발 프로세스를 간소화하는 데 유용한 도구가 되고 있습니다. 서버 측 로직의 통합으로 클라이언트 측 코딩이 간소화되고 전반적인 개발자 경험이 향상됩니다.
Next.js로의 마이그레이션에 대해 자세히 알아보기
많은 프론트엔드 개발자가 UI 개발 목적으로 React를 널리 활용하면서 서버 측 렌더링 및 정적 사이트 생성 기능을 제공하는 Next.js로 전환하는 경우가 많아졌습니다. React의 구문은 Next.js의 구문과 매우 유사하기 때문에 비교적 쉽게 전환할 수 있습니다.
마이그레이션의 필요성은 이 프로세스를 통해 달성할 수 있는 향상된 성능과 보안에서 비롯됩니다. 새로 도입된 서버 측 액션과 함께 서버 측 컴포넌트를 활용할 수 있는 기능을 갖춘 Next.js는 표준 React 개발에 대한 보다 강력하고 효율적인 대안으로 제시됩니다. 최적의 이점을 누리기 위해 React 개발자는 애플리케이션을 Next.js와 통합하는 데 능숙해질 것을 권장합니다.