Tweet
Tweet

Slide 1

Slide 1 text

੗ӝࣗѐ 2020֙ 4ਘ Classmethod ੑࢎ ೠҴীࢲ Ӕޖ ઺ ઱۽ ೐ۿ౟ূ٘, ࢲߡܻझ ଃী ҙब

Slide 2

Slide 2 text

ݾର - SPAীࢲ੄ SSR - SEO - Rendering - Next.js - Demo - ࢲߡܻझ ߓನ - AWS Amplify - Serverless Framework

Slide 3

Slide 3 text

SPAীࢲ SSRਸ ৵?

Slide 4

Slide 4 text

SEO

Slide 5

Slide 5 text

Googlebot Rendering on the Web: Performance Implications of Application Architecture (Google I/O ’19) ୭न JSܳ ૑ਗೞৈࢲ CSRਸ ࢎਊೞח SPAب оמ

Slide 6

Slide 6 text

Google Search Console https://search.google.com/search-console/welcome URL Inspection Toolਸ ࢎਊ೧ࢲ पઁ ੜ ੘زغҊ ੓ח૑ ഛੋ

Slide 7

Slide 7 text

ఋ Ѩ࢝ূ૓੄ SEO https://searchadvisor.naver.com/guide/seo-advanced-javascript ఋ Ѩ࢝ূ૓ٜ਷ ই૒ SPAܳ ৮੹൤ ૑ਗೞҊ ੓૑ח ঋ਺

Slide 8

Slide 8 text

Ҵղ Ѩ࢝ূ૓ ࠺ਯ https://gs.statcounter.com/search-engine-market-share/all/south-korea http://www.internettrend.co.kr/trendForward.tsp Ҵղীࢲ੄ ݽٚ ࢲ࠺झী ؀ೠ Ѩ࢝ূ૓ ࠺ਯ Ҵղীࢲ੄ Ҵղ ࢲ࠺झী ؀ೠ Ѩ࢝ূ૓ ࠺ਯ

Slide 9

Slide 9 text

Googleীࢲ੄ ֢୹݅ ೙ਃೞ׮ݶ CSRੋ SPAܳ ࢎਊ೧ب оמ ׮ܲ Ѩ࢝ূ૓ীࢲ੄ ֢୹ب Ҋ۰ೠ׮ݶ SSRਸ ࢎਊೞৈ SEO ೱ࢚

Slide 10

Slide 10 text

Rendering

Slide 11

Slide 11 text

Rendering on the Web: Performance Implications of Application Architecture (Google I/O ’19) ੉࢚੸ੋ ۪؊݂ SSR, CSR݅ ࢎਊೞח Ѫ੉ ইפۄ ಕ੉૑ী য਎ܻח ۪؊݂੉ ೙ਃ

Slide 12

Slide 12 text

۪؊݂ ߹ ର੉ https://developers.google.com/web/updates/2019/02/rendering-on-the-web

Slide 13

Slide 13 text

۪؊݂ ߹ ର੉ https://developers.google.com/web/updates/2019/02/rendering-on-the-web

Slide 14

Slide 14 text

Next.js React ੗୓੸ਵ۽ب SSR੉ оמೞ૑݅ SSR, Hydration, Pre-renderingਸ ખ ؊ औѱೞӝ ਤ೧ Next.jsܳ ࢎਊ

Slide 15

Slide 15 text

Demo

Slide 16

Slide 16 text

AWSীࢲ SPA੄ SSRਸ ࢲߡܻझ۽ যڌѱ?

Slide 17

Slide 17 text

AWS Amplify৬ Serverless Framework

Slide 18

Slide 18 text

যڃ ഋక۽ ߓನ غ঻ਸөਃ?

Slide 19

Slide 19 text

ইఃఫ୊

Slide 20

Slide 20 text

Next.js জ ࢤࢿ ߂ Amplify ࢤࢿ Next.js ೐۽ં౟ ࢤࢿ Next.js ೐۽ં౟ী Amplify ୶о npm install aws-amplify @aws-amplify/ui-react ೐۽ં౟ী was-amplify ୶о

Slide 21

Slide 21 text

API ୶о Amplify cli۽ API ୶о झః݃ ੘ࢿ

Slide 22

Slide 22 text

Amplifyী ݅ٚ APIܳ AWSী ಹए, ੘ࢿೠ झః݃۽ ௏٘о ੗زࢤࢿ ؽ src/graphql/

Slide 23

Slide 23 text

nextjsaws: component: “@sls-next/[email protected]" ࢲߡܻझ ೐ۨ੔ਕ௼۽ ߓನ మ೒݁ ࢤࢿ serverless.yml ౵ੌ੄ ղਊਸ ׮ ૑਍ റ ਤ ௏٘ ੘ࢿ ߓನ ઺

Slide 24

Slide 24 text

Ѿҗ ഛੋ

Slide 25

Slide 25 text

੉റ Gtihub Actions ١ਸ ࢎਊೞৈ CI/CD ө૑ ࢸ੿೧فݶ ݒ਋ рಞ

Slide 26

Slide 26 text

ଵҊ https://youtu.be/k-A2VfuUROg AWS Amplify Next.js ౚషܻ঴ https://docs.amplify.aws/start/getting-started/data-model/q/integration/next#api-with-server-side-rendering-ssr https://tinyurl.com/y43q9rjx

Slide 27

Slide 27 text

хࢎ೤פ׮