Nextjs

Single Page Application

소스코드

https://github.com/egoing/nextapp/commit/e0dc92feeb55b80239f0015792a60f281f930001

라이브 예제

https://nextapp-9efh7p3uc-egoing.vercel.app/

우리가 하고 싶은 것

  • 링크를 클릭하면 페이지 전체 리로딩이 일어나지 않고 필요한 콘텐츠만 로딩하고 싶다. 
  • 이미 방문한 페이지는 캐슁을 해서 다시 다운로드 하지 않도록 하고 싶다. 
  • 미리 페이지를 로드했다가 실제 요청이 있을 때  클라이언트 측에서 즉시 응답한다. 

Link 적용

1. 브라우저의 개발자도구/네트워크 탭을 엽니다. 

2. 링크를 클릭했을 때 서버와 통신하는 양상을 확인합니다.

3. 모든 a 태그를 Link 콤퍼넌트로 변경합니다. 

import Link from 'next/link'
import './globals.css'
export const metadata = {
  title: 'WEB tutorial',
  description: 'Generated by egoing',
}
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <h1><Link href="/">WEB</Link></h1>
        <ol>
          <li><Link href="/read/1">html</Link></li>
          <li><Link href="/read/2">css</Link></li>
        </ol>
        {children}
        <ul>
          <li><Link href="/create">create</Link></li>
          <li><Link href="/update/id">update</Link></li>
          <li><button>delete</button></li>
        </ul>
      </body>
    </html>
  )
}

4. 다시 링크를 클릭해서 아래와 같은 변화를 확인합니다.

  • 페이지 리로딩이 없어졌다. 
  • 방문한 페이지를 다운로드 받지 않는다. 
  • 미리 페이지를 다운로드 한다. 

5. SPA의 의미 생각하기 

하나의 페이지에서 모든 작업을 처리하는 앱을 의미합니다. 서버로부터 가져올 데이터가 있다면 ajax와 같은 방법을 통해서 동적으로 로딩합니다. 이것을 SPA(single page application)이라고 합니다. Link는 Next.js에서 SPA를 매우 쉽게 구현하도록 도와주는 도구입니다. 

댓글

댓글 본문
  1. SPA 개념 !
  2. Hoon Ko
    20231018
  3. 딸기공방
    230912
  4. Hoon Ko
    20230905
  5. 김김김
    app/layout.js의 코드 변경

    import Link from 'next/link' 추가
    a 태그 -> Link로 변경
  6. 남기훈
    a태그와 Link태그를 두고 네트워크 탭 여신다음에 클릭 해보시면 확연하게 다른 점을 아실거 같아요
    대화보기
    • 코드는 동일한데, Link 컴포넌트로 변경 후에 호버 시에도 네트워크 탭에 아무런 반응 없고 클릭해서 라우팅 되면 두 번씩 get 요청을 보내는데 뭐가 잘못됐을까요...?
    • 어흥
      230813