Nalutas: getserversideprops

Oo naman, sisimulan ko na ang pagbalangkas ng artikulo.

Ang GetServerSideProps ay isang tampok ng sikat na open-source na JavaScript library, Next.js. Ang tampok na ito ay nagbibigay-daan sa pagkuha ng data sa server-side, na nagbibigay ng mahika upang maisagawa ang mga operasyon tulad ng pagbuo ng pahina sa bawat kahilingan na sa huli ay nakakatulong sa pagpapahusay ng SEO at karanasan ng user.

   export async function getServerSideProps(context) {
       const res = await fetch(`https://.../data`);
       const data = await res.json();

       if (!data) {
           return {
               notFound: true,
           }
       }

       return {
           props: { data },
       }
}

Kapag isinama sa iyong Next.js na application, ang getServerSideProps ay nagti-trigger ng isang tawag sa iyong data source, na nagre-render lang sa page kapag naibalik ang data. Nag-aambag ito sa mas mabilis na pag-load ng pahina at ang pagdama ng isang mas tumutugon na application.

Pag-unawa sa getServerSideProps Function

Ang getServerSideProps Ang function ay isang server-side rendering (SSR) na feature sa Next.js, na naghihintay para sa lahat ng data na makuha bago nito makumpleto ang pag-render. Pinapabuti ng SSR ang pagganap ng SEO dahil nagpapakita ito ng ganap na nai-render na pahina sa mga search engine, isang mahalagang punto para sa mga pampublikong pahina kung saan ang pagpoposisyon ng SEO ay mahalaga.

Sa sample na code sa itaas, ang function na 'getServerSideProps' ay kumukuha ng data mula sa isang server. Ipapasa ang data na ito bilang prop sa React component at ini-precach sa server, na nagbibigay-daan sa UI na madaling mag-update at mag-render.

Mga Benepisyo at Paggamit ng getServerSideProps

Ang pangunahing bentahe ay ang pagpapabuti ng SEO. Sa halip na makatanggap ng blangkong pahina, ang mga web crawler ay nakakakuha ng ganap na nai-render na pahina. Ginagawa nitong mas na-index ang iyong website at pinapabuti nito ang ranggo nito sa mga pahina ng resulta ng search engine.
Pinapabuti din nito ang karanasan ng gumagamit. Sa mabagal na koneksyon, ang mga user ay maaaring karaniwang makakita ng blangko o naglo-load na screen. Gayunpaman, sa getServerSideProps, agad nilang nakikita ang isang nai-render na pahina.

   export async function getServerSideProps(context) {
       const { params, req, res, query } = context 
       // Perform server-side operations 
       return {
           props: {},
       }
}

Sa halimbawa sa itaas, ang parameter na 'konteksto' ay isang bagay na may mga key na maaaring magamit para sa mga operasyon sa gilid ng server.

  • params: Naglalaman ng mga parameter ng ruta para sa mga page na gumagamit ng mga dynamic na ruta.
  • req: Isang halimbawa ng http.IncomingMessage, kasama ang ilang mga pre-built na middleware
  • res: Isang halimbawa ng http.ServerResponse
  • tanong: Isang bagay na kumakatawan sa string ng query.

Ang paggawa ng mga web application na pinagsasama ang performance, SEO optimization, at mahusay na karanasan ng user ay isang kumplikadong gawain, ngunit sa mga feature tulad ng getServerSideProps mula sa Next.js, nagiging mas maaabot ang mga layuning ito.

Mga Aklatan at Function na Kasangkot

Ang pangunahing function na kasangkot sa solusyon ay getServerSideProps, isang Next.js partikular na function. Ang tampok na ito ay may kasamang built-in sunduin() function, isang modernong alternatibo sa XMLHttpRequest. Ang await operator na ginamit sa fetch() ay ginagamit upang hintayin ang Pangakong babalik upang malutas.

Tandaan, ang pag-unawa sa mga tool na magagamit mo, tulad ng Next.js at ang tampok na pag-render sa panig ng server nito, ay mahalaga sa paglikha ng mga application na hindi lamang gumagana nang maayos ngunit gumaganap din nang mahusay mula sa isang pananaw sa SEO. Sa malakas na pagsasama ng JavaScript at SEO, ang kahalagahan ng mga tool tulad ng Next.js at mga feature tulad ng getServerSideProps ay hindi maaaring palakihin.

Kaugnay na mga post:

Mag-iwan ng komento