SSR (Deploy Section)

JB·2022년 3월 10일
0

CodeCamp FE 05

목록 보기
33/33

☁️ [SSR(ServerSideRendering)]

OG(OpenGraph)
meta tag of HTML

🐚 What is the meta tag?

  • The tag defines metadata about an HTML document. Metadata is data (information) about data. tags always go inside the element, and are typically used to specify character set, page description, keywords, author of the document, and viewport settings.
    _(HTML meta tag)

🐚 Background Information

  • When there is a link sent, we don't know the specific information about the site with a single link. So at this point, tags display site-preview images, description of site, and title.
  • Meaning, the tags are used to give an easy look of HTML document's meta information.
  • Here, not the head from HTML, but the Head tag was imported from Next.js.
    --> Inside Head, using the meta tag, the properties and contents were assigned.
  • Since Kakao, discord, slack, or other platform developers developed preview-function inside the platform, OG tag reads the code and could create site-preview.

🐚 SSR is made because...

  • While assigning Head tags in Product Detail page, it wasn't able to assign multiple Head tags.

  • So first, I tried using this method:
    First , I fullfilled the content of meta with data that was callen from useQuery().
    --> This was because before requesting for dta, frontend-server draws the screen display, which at the point the content of meta is empty; therefore it must wait until it receives the data.

  • Here, SSR solved the problem.
    --> When the request is sent regarding the site, if the page is set SSR, frontend-server doesn't have to go through the browser, and the request is directly sent to backend-server. Thus, the scaping was possible since meta contained the data.

  • The biggest reason why people use SSR is due to SEO: Search Engine Optimization(검색 엔진 최적화).
    --> Crawler is a program that is used bt search engines that traverses the internet in order to collect and indexx data. It'll visit a site via a hyperlink. Then, it reads the sites' content and embedded links befpre follwoing the links away from the site. (embedded: 심다/끼워놓다)
    --> There are multiple search-bots existing in searching engine site, whom operates crawlers. Search-bots surf around diverse sites 24 hours, and read the information of the current site it is on, and detects what kind of site it is.

  • However, there must be contents containing inside the site to upload the keywords.
    --> However, the search-bot doesn't wait until all the data are received. So here, SSR is operated to read the information about the page and uploads the keyword.

profile
두비두밥밥

0개의 댓글