docs__myblog__frame__react_ssr.md.js

(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([[61],{"4Y1E":function(e,n,t){e.exports=t.p+"static/\u5ba2\u6237\u7aef\u6e32\u67d3.1f73b02e.jpg"},FyoD:function(e,n,t){e.exports=t.p+"static/\u670d\u52a1\u7aef\u6e32\u67d3.f2f872e2.png"},NqMQ:function(e,n,t){e.exports=t.p+"static/ssr1.081ab4d3.png"},bzFx:function(e,n){e.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAbIAAACwCAYAAABqzOujAAABPWlDQ1BJQ0MgUHJvZmlsZQAAKJFjYGDiSSwoyGFhYGDIzSspCnJ3UoiIjFJgf8LAycDCwMsgy6CQmFxc4BgQ4ANUwgCjUcG3awyMIPqyLsisBtZdpRJfl5zTEH/CvaPJNgZTPQrgSkktTgbSf4A4IbmgqISBgRGkR7m8pADEbgCyRYqAjgKyp4DY6RD2ChA7CcLeA1YTEuQMZF8AsgWSMxJTgOwHQLZOEpJ4OhIbai8IsBmZmLuaE3AoqaAktaIERDvnF1QWZaZnlCg4AkMnVcEzL1lPR8HIwMiAgQEU1hDVn8+Dw5BRIgkhlgn0u2kGUPAXQiyNm4FhhwADg1AkQkzdG8jvZGDYd6sgsSgR7gDGbyzFacZGEDaPFAMD64H//z/9Z2BgT2Bg+Hvu///fM/7//zuNgYH5CwPDfj8ASUVcjZPU4RAAAAA4ZVhJZk1NACoAAAAIAAGHaQAEAAAAAQAAABoAAAAAAAKgAgAEAAAAAQAAAbKgAwAEAAAAAQAAALAAAAAAyPsTagAAE5ZJREFUeAHt3XesFUUbx/EBiV00EhWxoUQBe4+9K1gIKqLBXmIssUT9Q2OLGgvESjQWDNZYsYGKDbD7hyYWVETFhr23aFTU885vk913dvbs3nvPPRfzsN9Jbs6WOXvmfGayz5nZ2b29Gj45EgIIIIAAAkYFehstN8VGAAEEEEAgESCQ0RAQQAABBEwLEMhMVx+FRwABBBAgkNEGEEAAAQRMC/SZNXuO6S9A4RFAAAEE6i3Qi1mL9W4AfHsEEEDAugBDi9ZrkPIjgAACNRcgkNW8AfD1EUAAAesCBDLrNUj5EUAAgZoLEMhq3gD4+ggggIB1AQKZ9Rqk/AgggEDNBQhkNW8AfH0EEEDAugCBzHoNUn4EEECg5gIEspo3AL4+AgggYF2AQGa9Bik/AgggUHMBAlnNGwBfHwEEELAuQCCzXoOUHwEEEKi5AIGs5g2Ar48AAghYFyCQWa9Byo8AAgjUXIBAVvMGwNdHAAEErAsQyKzXIOVHAAEEai5AIKt5A+DrI4AAAtYFCGTWa5DyI4AAAjUXIJDVvAHw9RFAAAHrAgQy6zVI+RFAAIGaCxDIat4A+PoIIICAdQECmfUapPwIIIBAzQUIZDVvAHx9BBBAwLoAgcx6DVJ+BBBAoOYCBLKaNwC+PgIIIGBdgEBmvQYpPwIIIFBzAQJZzRsAXx8BBBCwLkAgs16DlB8BBBCouQCBrOYNgK+PAAIIWBcgkFmvQcqPAAII1FyAQFbzBsDXRwABBKwL9Am/wBdffOHOPPNM9++//yab11lnHXf66aeHWeb78gsvvOAmTJiQfe7uu+/uxowZk61/+eWX7uyzz3bz5s1Ltg0cONBdcMEF2X4Wekag3e7Tp093t956a1bYvffe2+27777ZOgsIIIBAqUAjSM8991zDZ8z+hg0bFuz9bxavvfbarDwqmw+suYLMnDkzt3/jjTfO7WelZwTa7X7ppZfm6vH888/vmYJzVAQQWOAEGFosDfHsQAABBBCwIEAgs1BLlBEBBBBAoFSAQFZKww4EEEAAAQsCBDILtUQZEUAAAQRKBXKzFktz+R3+6qD74IMP3KxZs9zyyy/v1lprLbfssstWvaWw748//nDvvPOO+/rrr92AAQPckCFD3MILL1zINz82/Pzzz0lZfvnlF7fSSiu5Nddc8z8rS7u/r2YUzp49O6mz1Vdf3a222mqud+/WfrOozt544w33ww8/uBVWWMGtu+66LTupDX3yySfurbfeciuuuKLbYIMNXJ8+nW6C7WbieAggsIAIdHh2++eff5Ip+EsvvXRysh85cqTbcsstXb9+/ZITkZ+91iHFXXfdleRdbLHFnJ9V6DSFXiexRRZZxG2yySbu6quvTk66HR6omxl0UtbtBaussopbZpllku/hZ2YmJ2eVRWV68MEHu/Up77//fnLC10k//XvllVeaHnOPPfbI8ijvnDlzmubbfPPNc/nkFSfdOqHbEvr27Zv8SNhpp53czjvv7NZYYw230EILud122829+eab8duy9fHjx+c+47777nPPPvtsUudbbLGFU1lVV61Mif/222/dAQcc4NSGFFhHjBjhNt100+SH0KGHHur0Y4KEAAIItCwQzsOMp99vvfXWjdGjR+emRfsPKqw/8sgj4WGy5d9//71x7LHHFvI3O8b+++/f8Ce07L3pQrum3/uTeGP99dfvVFkOP/zwxk8//ZQWoUuvf//9d8P3WHOfc/HFFxeO8eOPP+byyOTGG28s5Pvwww8L+fw9V7l8Pvg2llpqqUK+Zs5XXHFFQ2WM04UXXph7/1FHHdX0mP5HSPLWzk6/f/XVVxsrr7xy7thxuXTLxCmnnJLLw/T7uIZYRwCBMoHKHtmLL77oJk2a5M871enUU091/uRYyOSDoLv++usL25ttuPfee51++avX1O6kIdH11lvPdab3qM++5ZZb3K677urUG+1qUu/n4IMPzr3tsccey61rRTd6x+mpp56KN7lnnnkmt80HLLfddttl2+6++263zz77uF9//TXbVrWgujrrrLOqsiT7Jk6c2Oljlh3s3XffTXrgn332WVmWZLsPdu7KK6+szMNOBBBAoEygMpClbzrkkEOS6xq6TuJ7bc73bNJdyet7773nHn/88dy2hx9+2D366KO5bb53llyX+u2335zvaSQnL52Y06Trb7fddlu62rbXE088sXAs3wNxr7/+uvvuu++SYKFgECYNB+pk3koaNWpU7m3PP/98ISjMmDEjl0crCnjxD4Inn3wyl++www7Lriv5XqM7+eSTc/vlefvttyfDlJ9//rmbMmVKcj0zzDRu3LjKYcYwr5Z9j8ptttlmLqyrOE+z9fPOO6+wWdt0zU1tQNfKDjzwwEIeNiCAAAJdEgi7avHQoj9QQ0N+/pFVYbaG//VfGHbyJ8csj4YU4+GkM844I9sfLvjrMLkhJQ3L+V5ZlqW7Q4v3339/7vj6ThqKi5OG2+JhUH/ibviJKXHWDtd9T64wvDh16tTc+/xkmUK5VDYfQLN8KpPKoO3p39NPP53tP+mkk7Lt2i87P5km258ufP/99w0fiHJ5NWwc1ms8tKjj6bMfeuih9DDJqw9AyWtHQ4saUkzLnL76XnfuWFpRGWJ35WdosUDFBgQQKBHosEem5xb26tXLn1v+n5ZccslCT0Cz0dL08ssvu3g46dxzz0135141TKYhyDR98803zl9zS1e7/XrPPffkjuEDs9Nz/OKkIcHLL7881+vQcJ2eAdjVpBmC/jpb7m3Tpk3L1j/99FOnXmyz5ANVtlk9xnDIUD2ibbbZJtt/8803Z8taUF1pJmicNLv0mmuuyW3WsLHKUZXUO9bknjAtvvji4Wrpctwb17BxWM/pG9W2fNBKV3lFAAEEuixQGcg0zX7w4MFNDxpv1zBWmnRtJEyaqv/AAw+4O+64o+mf7zGE2UtP8rlMnVxRMAjTcccdF67mlnWSPuGEE3LbdLtAKyme3RcGZ80GTJOCk++tpqsuvE4WDz8eccQR2bCibmEIg5wOEF+byw7qFzTzUcODYSoLpsrje2xNA374/qplXZcMk2YnliW1szjwl+VlOwIIIBAL9Ik3hOu6t6os9e/fP7crfWK+NuoepjDphFl1kg3zavnjjz+ON7W0/tdffxWCYrMeS3hwTQoJk67jtJIUNHRtKe2ZykDL2hb2ztQ71C0AY8eOTT5GgcwPzToF1fi643777ZcVRdP8w6QfC0sssUS4qbC80UYbufBWANXTLrvsUsinDQp83UlxG9AtD1Wpqq1VvY99CCCAQGWPTEOIZSkebgzzdTcQffTRR+HhWl7WjcFxWm655eJNuXXdzxWmuGcR7qta1vDiQQcdlMuiGYgK+Oqdpkn3d2nYLUwvvfRSMhki7JGp17LVVltl2cKhXG1UgOwo6Sb0MFU5r7rqqmHWLi+nATx9Y0c3z3em/OmxeEUAAQRCgcoeWZixK8vxr2+dhONhrarjxe+vylu1T58bJ828rApmunk3TN0pi2YvaoZgmjQDUTddh0OCunF50UUXdXvuuWc2y1MBLOzh6v0KirqOl6Y4KH311VfprtJXDUeGSU80KUtVP1TK3hNu19NEwmDm75sLdxeWNXuUhAACCLQi0COBLB6+0/WWsBfSSkFbeY+eJKInW2iqf5rUw6oKZPE1MT2SqdWkp1eEw4t+BmByX1V6vLXXXjt5CofWhw8fngWyJ554ohDI4in9GkoMk25d+PPPP5OnpYTbw+X4PrqhQ4eGu9u6rDagCSVpCoNaui18bbXnGx6DZQQQqKdA5dBiqyTxSVbXhHTdpyxdd911SY9DvQ796T6odiX1gMLkn54RruaWFQhUljDpv2S3mtSr0T14aVJPLJy9qUc1pWnHHXdMF51uEPa3HWTr6lnGw49xj0yZdVN5WdLjqcLAonzxhJ2y97ayfdCgQbm36cbtsqS20c46L/sctiOAwIIp0COBbMMNN8xp6QTuH42U25auaAbf8ccf7+68887sr53XS+Kp9jfddFPhaRkqi789IZkGrun/YQoDTLi9s8txTyocVgwnWqh3Fg6Fhvk0USYcVtRnK0jGM/10s3GzKfW6+fi0007LFVk3tWv4r6eSephh0vXB+ObudL/aRvh90+28IoAAAp0R6JFApgcKx/ctnXPOOcnDhzVNX49+0tMdLrvsMqf7usKk3tz2228fburWsoKAhjbDpOCkR2fppK8naWjI7eijj3aXXHJJmC25vtXdoKqHJGt4s1kKJ28oMIU9tDB/HAzTfZrpqOn7adIQqoYzdQ+Xrkmpp6OJI/q+4bR+5b/hhhsKwTE9TjteNUMyrlvNzlSPOJ2EM3fu3OTWA7UNEgIIINCyQHijdPxkD3/iCXfnlv1wYcN/aPbnT8K5/fPmzWvoYbBhns4s64kQYerukz10LB80u1wOH1AbfqgxLErLy/5EXfj89OG74UH98Fshn++lNfSkkLLkA3LhPR05+6BdOFz8ZI+rrrqqkCfc0NGTPZTXX7frctnSsvNkj1CbZQQQqBLokR6ZPxklN+76x0O5bbfdVqsdJvUs9HxG/ZJvd9Iwmq4PlfWM4s9Tz0jPlGzX/0qLn+Ooz1PvJE477LBDvCkZPqz6X2LHHHNMl54JqX9jE/eWCx/apg2aTCL3cMi07NCdyVP2XrYjgEC9BdoWyDRDME4DBw50euSSTpzhEFicz/8Lj+Qm6L322ive5eLjaqp6mOL98XqaV8N4r732mtODi8uSTqYTJkxwkydPTv43V1m+rm5XcI6DqP5XWJx0D1v8QOb4CSHxe7R+5JFHOt0grSf2lyUdV0/cv+iii5oG6DK3suPF+eP19H1y19NVdHtBWdKjtWROQgABBFoR6KXuWitvbOU9+uePeuKDruUoaOhpDjrB659azs+kr6wbit9++22n+69UDs1O1LU968kP6SZPM9ETSfRkE00iUc+os89I7Mnvr7Kp/nVNUpNX9BQVzZzkv0T3pDrHRmDBF5ivgWzB5+QbIoAAAgjMb4G2DS3O74LzeQgggAACCEiAQEY7QAABBBAwLUAgM119FB4BBBBAgEBGG0AAAQQQMC1AIDNdfRQeAQQQQIBARhtAAAEEEDAtQCAzXX0UHgEEEECAQEYbQAABBBAwLUAgM119FB4BBBBAgEBGG0AAAQQQMC1AIDNdfRQeAQQQQIBARhtAAAEEEDAtQCAzXX0UHgEEEECAQEYbQAABBBAwLUAgM119FB4BBBBAgEBGG0AAAQQQMC1AIDNdfRQeAQQQQIBARhtAAAEEEDAtQCAzXX0UHgEEEECAQEYbQAABBBAwLUAgM119FB4BBBBAgEBGG0AAAQQQMC1AIDNdfRQeAQQQQIBARhtAAAEEEDAtQCAzXX0UHgEEEECAQEYbQAABBBAwLUAgM119FB4BBBBAgEBGG0AAAQQQMC1AIDNdfRQeAQQQQIBARhtAAAEEEDAtQCAzXX0UHgEEEECAQEYbQAABBBAwLUAgM119FB4BBBBAgEBGG0AAAQQQMC1AIDNdfRQeAQQQQIBARhtAAAEEEDAtQCAzXX0UHgEEEECAQEYbQAABBBAwLUAgM119FB4BBBBAgEBGG0AAAQQQMC1AIDNdfRQeAQQQQIBARhtAAAEEEDAtQCAzXX0UHgEEEECAQEYbQAABBBAwLUAgM119FB4BBBBAgEBGG0AAAQQQMC1AIDNdfRQeAQQQQIBARhtAAAEEEDAtQCAzXX0UHgEEEECAQEYbQAABBBAwLUAgM119FB4BBBBAgEBGG0AAAQQQMC1AIDNdfRQeAQQQQIBARhtAAAEEEDAtQCAzXX0UHgEEEECAQEYbQAABBBAwLUAgM119FB4BBBBAgEBGG0AAAQQQMC1AIDNdfRQeAQQQQIBARhtAAAEEEDAtQCAzXX0UHgEEEECAQEYbQAABBBAwLUAgM119FB4BBBBAgEBGG0AAAQQQMC1AIDNdfRQeAQQQQIBARhtAAAEEEDAtQCAzXX0UHgEEEECAQEYbQAABBBAwLUAgM119FB4BBBBAgEBGG0AAAQQQMC1AIDNdfRQeAQQQQIBARhtAAAEEEDAtQCAzXX0UHgEEEECAQEYbQAABBBAwLUAgM119FB4BBBBAgEBGG0AAAQQQMC1AIDNdfRQeAQQQQIBARhtAAAEEEDAtQCAzXX0UHgEEEECAQEYbQAABBBAwLUAgM119FB4BBBBAgEBGG0AAAQQQMC1AIDNdfRQeAQQQQIBARhtAAAEEEDAtQCAzXX0UHgEEEECAQEYbQAABBBAwLUAgM119FB4BBBBAgEBGG0AAAQQQMC1AIDNdfRQeAQQQQIBARhtAAAEEEDAtQCAzXX0UHgEEEECAQEYbQAABBBAwLUAgM119FB4BBBBAgEBGG0AAAQQQMC1AIDNdfRQeAQQQQIBARhtAAAEEEDAtQCAzXX0UHgEEEECAQEYbQAABBBAwLUAgM119FB4BBBBAgEBGG0AAAQQQMC1AIDNdfRQeAQQQQIBARhtAAAEEEDAtQCAzXX0UHgEEEECAQEYbQAABBBAwLUAgM119FB4BBBBAgEBGG0AAAQQQMC1AIDNdfRQeAQQQQIBARhtAAAEEEDAtQCAzXX0UHgEEEECAQEYbQAABBBAwLUAgM119FB4BBBBAgEBGG0AAAQQQMC1AIDNdfRQeAQQQQOB/LDNtxpXeugMAAAAASUVORK5CYII="},mRDW:function(e,n,t){"use strict";t.r(n);var a=t("q1tI"),l=t.n(a),A=t("dEAq"),r=t("H1Ra"),c=l.a.memo((e=>{e.demos;return l.a.createElement(l.a.Fragment,null,l.a.createElement("div",{className:"markdown"},l.a.createElement("h2",{id:"\u5ba2\u6237\u7aef\u6e32\u67d3\u4ecb\u7ecd"},l.a.createElement(A["AnchorLink"],{to:"#\u5ba2\u6237\u7aef\u6e32\u67d3\u4ecb\u7ecd","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"\u5ba2\u6237\u7aef\u6e32\u67d3\u4ecb\u7ecd"),l.a.createElement("p",null,"\u4e0b\u9762\u7684\u8fd9\u6bb5\u4ee3\u7801\u5c31\u662f\u5ba2\u6237\u7aef\u6e32\u67d3\u51fa\u6765\u7684"),l.a.createElement(r["a"],{code:'<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="utf-8" />\n    <link rel="icon" href="/favicon.ico" />\n    <meta name="viewport" content="width=device-width, initial-scale=1" />\n    <meta name="theme-color" content="#000000" />\n    <meta\n      name="description"\n      content="Web site created using create-react-app"\n    />\n    <link rel="apple-touch-icon" href="/logo192.png" />\n    <link rel="manifest" href="/manifest.json" />\n    <title>React App</title>\n  </head>\n  <body>\n    <noscript>You need to enable JavaScript to run this app.</noscript>\n    <div id="root"></div>\n    <script src="/static/js/bundle.js"><\/script>\n    <script src="/static/js/0.chunk.js"><\/script>\n    <script src="/static/js/main.chunk.js"><\/script>\n  </body>\n</html>',lang:"html"}),l.a.createElement("p",null,"\u771f\u6b63\u9875\u9762\u7684\u5185\u5bb9\u662f\u5728 js \u91cc\u9762\u6267\u884c\u7684\uff0c\u6240\u4ee5\u53eb\u5ba2\u6237\u7aef\u6e32\u67d3\uff0c"),l.a.createElement("ol",null,l.a.createElement("li",null,"\u5982\u679c main.js \u52a0\u8f7d\u6bd4\u8f83\u6162\uff0c\u5c31\u4f1a\u51fa\u73b0\u767d\u5c4f\u73b0\u8c61"),l.a.createElement("li",null,"\u4f20\u7edf\u7684\u641c\u7d22\u5f15\u64ce\u722c\u866b\u56e0\u4e3a\u4e0d\u80fd\u6293\u53d6 js \u751f\u6210\u540e\u7684\u5185\u5bb9\uff0c\u9047\u5230\u5355\u9875 web \u9879\u76ee\u5c31\u662f\u4ec0\u4e48\u90fd\u6293\u53d6\u4e0d\u5230\uff0c\u5728 SEO \u4e0a\u4e0d\u53cb\u597d")),l.a.createElement("p",null,l.a.createElement("strong",null,"\u5ba2\u6237\u7aef\u6e32\u67d3\u6d41\u7a0b")),l.a.createElement("img",{src:t("4Y1E")}),l.a.createElement("h3",{id:"\u5ba2\u6237\u7aef\u6e32\u67d3\u7684\u4f18\u7f3a\u70b9"},l.a.createElement(A["AnchorLink"],{to:"#\u5ba2\u6237\u7aef\u6e32\u67d3\u7684\u4f18\u7f3a\u70b9","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"\u5ba2\u6237\u7aef\u6e32\u67d3\u7684\u4f18\u7f3a\u70b9"),l.a.createElement("ul",null,l.a.createElement("li",null,"\u4f18\u70b9",l.a.createElement("ul",null,l.a.createElement("li",null,"\u53ef\u89c1\u65e2\u53ef\u64cd\u4f5c\uff0c\u4f8b\u5982 js \u52a0\u8f7d\u597d\u4e4b\u540e\uff0c\u9875\u9762\u7684\u8df3\u8f6c\u70b9\u51fb\u90fd\u4f1a\u5f88\u81ea\u7136"),l.a.createElement("li",null,"\u9875\u9762\u64cd\u4f5c\u6d41\u7a0b\u81ea\u7136"))),l.a.createElement("li",null,"\u7f3a\u70b9",l.a.createElement("ul",null,l.a.createElement("li",null,"\u767d\u5c4f\u65f6\u95f4\u957f"),l.a.createElement("li",null,"SEO \u4e0d\u53cb\u597d")))),l.a.createElement("h2",{id:"\u670d\u52a1\u7aef\u6e32\u67d3"},l.a.createElement(A["AnchorLink"],{to:"#\u670d\u52a1\u7aef\u6e32\u67d3","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"\u670d\u52a1\u7aef\u6e32\u67d3"),l.a.createElement("p",null,"server side render\uff1a\u5c31\u662f\u670d\u52a1\u7aef\u6e32\u67d3\uff0c\u4e0d\u540c\u4e8e jsp,php \u7b49\u4f20\u7edf\u670d\u52a1\u7aef\u6e32\u67d3,"),l.a.createElement("p",null,"\u9875\u9762\u4e0a\u4efb\u4f55\u7684\u4e00\u4e2a\u6587\u6848\u5728\u6e90\u4ee3\u7801\u91cc\u9762\u90fd\u662f\u80fd\u627e\u5230\u7684\uff0c\u670d\u52a1\u5668\u7aef\u6e32\u67d3\u7684\u9875\u9762\u5c31\u662f\u8fd4\u56de\u4e00\u4e2a html \u7247\u6bb5\uff0c\u5ba2\u6237\u7aef\u4e0d\u9700\u8981\u8bf7\u6c42 js \u5c31\u80fd\u8bbf\u95ee"),l.a.createElement("p",null,"\u76ee\u524d\u7684 ssr \u662f\u57fa\u4e8e react vue \u7b49\u524d\u7aef\u6846\u67b6\u7684\u540c\u6784\u6e32\u67d3\uff08\u5373\u4e00\u4efd\u4ee3\u7801\uff0c\u540c\u65f6\u8fd0\u884c\u5728 server \u548c client \u7aef\uff09"),l.a.createElement("p",null,l.a.createElement("strong",null,"\u670d\u52a1\u7aef\u6e32\u67d3\u6d41\u7a0b")),l.a.createElement("img",{src:t("FyoD")}),l.a.createElement("h3",{id:"\u670d\u52a1\u7aef\u6e32\u67d3\u7684\u4f18\u7f3a\u70b9"},l.a.createElement(A["AnchorLink"],{to:"#\u670d\u52a1\u7aef\u6e32\u67d3\u7684\u4f18\u7f3a\u70b9","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"\u670d\u52a1\u7aef\u6e32\u67d3\u7684\u4f18\u7f3a\u70b9"),l.a.createElement("ul",null,l.a.createElement("li",null,"\u4f18\u70b9",l.a.createElement("ul",null,l.a.createElement("li",null,"SEO \u53cb\u597d"),l.a.createElement("li",null,"\u9996\u5c4f\u52a0\u8f7d\u5feb"))),l.a.createElement("li",null,"\u7f3a\u70b9",l.a.createElement("ul",null,l.a.createElement("li",null,"\u9875\u9762\u4f53\u9a8c\u4e0d\u597d"),l.a.createElement("li",null,"\u53ef\u89c1\u4e0d\u4e00\u5b9a\u53ef\u64cd\u4f5c"),l.a.createElement("li",null,"\u670d\u52a1\u5668\u538b\u529b\u8fc7\u5927")))),l.a.createElement("h2",{id:"react-ssr"},l.a.createElement(A["AnchorLink"],{to:"#react-ssr","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"React SSR"),l.a.createElement("p",null,"React SSR \u6b63\u597d\u89e3\u51b3\u5ba2\u6237\u7aef SEO \u4e0d\u53cb\u597d\u548c js \u592a\u5927\u52a0\u8f7d\u5f88\u6162\u5bfc\u81f4\u7684\u9875\u9762\u767d\u5c4f\u95ee\u9898"),l.a.createElement("h3",{id:"react-ssr-\u6d41\u7a0b\u56fe"},l.a.createElement(A["AnchorLink"],{to:"#react-ssr-\u6d41\u7a0b\u56fe","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"React SSR \u6d41\u7a0b\u56fe"),l.a.createElement("img",{src:t("NqMQ")}),"\u4e0a\u56fe\u5c31\u662fssr\u7684\u6d41\u7a0b\uff0c\u670d\u52a1\u7aef\u53ea\u662f\u751f\u6210\u4e86html\u4ee3\u7801\uff0c\u5b9e\u9645\u4e0a\u662f\u524d\u7aef\u751f\u6210\u4e00\u4e2amain.js\uff0c\u63d0\u4f9b\u7ed9\u670d\u52a1\u7aef\u7684html\u4f7f\u7528",l.a.createElement("h3",{id:"react-ssr-\u4f18\u7f3a\u70b9"},l.a.createElement(A["AnchorLink"],{to:"#react-ssr-\u4f18\u7f3a\u70b9","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"React SSR \u4f18\u7f3a\u70b9"),l.a.createElement("ul",null,l.a.createElement("li",null,"\u4f18\u70b9",l.a.createElement("ul",null,l.a.createElement("li",null,"SEO \u53cb\u597d"),l.a.createElement("li",null,"\u9996\u5c4f\u65f6\u95f4\u5feb"),l.a.createElement("li",null,"\u9875\u9762\u5207\u6362\u81ea\u7136"))),l.a.createElement("li",null,"\u7f3a\u70b9",l.a.createElement("ul",null,l.a.createElement("li",null,"\u914d\u7f6e\u590d\u6742"),l.a.createElement("li",null,"\u670d\u52a1\u5668\u538b\u529b\u5927\uff0c\u4f46\u662f\u6bd4\u4f20\u7edf\u7684\u670d\u52a1\u5668\u7aef\u5c0f"),l.a.createElement("li",null,"\u90e8\u5206\u5f00\u53d1\u53d7\u9650\u5236 ComponentDidMount")))),l.a.createElement("h2",{id:"\u4e0b\u9762\u5f00\u59cb\u642d\u5efa\u4e00\u4e2a-ssr-\u5c0f-demo"},l.a.createElement(A["AnchorLink"],{to:"#\u4e0b\u9762\u5f00\u59cb\u642d\u5efa\u4e00\u4e2a-ssr-\u5c0f-demo","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"\u4e0b\u9762\u5f00\u59cb\u642d\u5efa\u4e00\u4e2a ssr \u5c0f demo"),l.a.createElement("p",null,"\u9996\u5148\u662f\u521b\u5efa\u4e00\u4e2a react-ssr \u7684\u6587\u4ef6\u5939\uff0c\u91cc\u9762\u7684\u76ee\u5f55\u5982\u4e0b\uff1a"),l.a.createElement("img",{src:t("NqMQ")}),l.a.createElement("h3",{id:"\u9996\u5148\u662f\u670d\u52a1\u7aef"},l.a.createElement(A["AnchorLink"],{to:"#\u9996\u5148\u662f\u670d\u52a1\u7aef","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"\u9996\u5148\u662f\u670d\u52a1\u7aef"),l.a.createElement("p",null,"\u6211\u4eec\u4f7f\u7528\u7684\u662f koa \u542f\u52a8\u4e00\u4e2a\u670d\u52a1\uff0c\u4ee3\u7801\u5982\u4e0b:"),l.a.createElement(r["a"],{code:"const Koa = require('koa');\nconst Router = require('koa-router');\nconst serve = require('koa-static');\n\nconst app = new Koa();\nconst router = new Router();\n\nrouter.get('/', (ctx, next) => {\n  ctx.body = `<!DOCTYPE html>\n  <html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Document</title>\n  </head>\n  <body>\n    <div id='root'></div>\n    <script src=\"bundle.js\"><\/script>\n  </body>\n  </html>`;\n});\n\napp.use(serve('dist'));\n\napp.use(router.routes()).use(router.allowedMethods());\n\napp.listen(8088, () => {\n  console.log('\u670d\u52a1\u542f\u52a8\u6210\u529f');\n});",lang:"js"}),l.a.createElement("p",null,"\u8be5\u670d\u52a1\u4e3b\u8981\u662f\u5728\u6839\u76ee\u5f55\u4e0b\u9762\u8fd4\u56de\u4e00\u4e2a html \u9875\u9762\uff0c\u91cc\u9762\u5f15\u7528\u7684",l.a.createElement("code",null,"bundle.js"),"\u662f\u901a\u8fc7 react \u6253\u5305\u51fa\u6765\u7684\u4e00\u4e2a\u524d\u7aef\u9875\u9762\u7684 js \u6587\u4ef6\uff0c\u6240\u4ee5\u9700\u8981\u5728\u9759\u6001 html \u91cc\u9762\u5f15\u5165",l.a.createElement("code",null,"bundle.js")),l.a.createElement("p",null,"\u4f7f\u7528\u7684\u63d2\u4ef6\u5982\u4e0b\uff1a @types \u662f typescript \u4e0b\u9762\u7684\u63d2\u4ef6\uff0c\u5982\u679c\u662f\u4f7f\u7528 ts \u7684\u8bdd\u9700\u8981\u5b89\u88c5"),l.a.createElement(r["a"],{code:"# yarn add koa @types/koa\n# yarn add koa-router @types/koa-router\n# yarn add koa-static",lang:"bash"}),l.a.createElement("p",null,"\u6267\u884c ",l.a.createElement("code",null,"node src/server/app.js"),",\u663e\u793a\u670d\u52a1\u542f\u52a8\u6210\u529f\u5c31\u662f\u672c\u5730\u670d\u52a1\u5df2\u7ecf\u542f\u52a8\u597d"),l.a.createElement("h3",{id:"\u4e0b\u9762\u662f\u5ba2\u6237\u7aef"},l.a.createElement(A["AnchorLink"],{to:"#\u4e0b\u9762\u662f\u5ba2\u6237\u7aef","aria-hidden":"true",tabIndex:-1},l.a.createElement("span",{className:"icon icon-link"})),"\u4e0b\u9762\u662f\u5ba2\u6237\u7aef"),l.a.createElement("p",null,"\u9996\u5148\u662f\u5728",l.a.createElement("code",null,"shared/App.tsx"),"\u6587\u4ef6\u91cc\u9762\u5199\u5165\u9700\u8981\u6e32\u67d3\u7684 react \u4ee3\u7801"),l.a.createElement(r["a"],{code:"import React from 'react';\n\nconst App = () => {\n  return <h1>hello world</h1>;\n};\n\nexport default App;",lang:"js"}),l.a.createElement("p",null,"\u63a5\u4e0b\u6765\u662f",l.a.createElement("code",null,"client/index.tsx"),"\u91cc\u9762\u5bfc\u51fa\u7ec4\u4ef6\u5230\u9875\u9762\u7684",l.a.createElement("code",null,"root"),"\u6839\u5143\u7d20\u91cc\u9762"),l.a.createElement(r["a"],{code:"import React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from '../shared/App';\n\nReactDOM.render(<App />, document.getElementById('root'));",lang:"js"}),l.a.createElement("p",null,"\u90a3\u65e2\u7136\u5df2\u7ecf\u6709\u4e86",l.a.createElement("code",null,"react"),"\u4ee3\u7801\uff0c\u90a3\u662f\u4e0d\u662f\u5f97\u8981\u4e00\u4e2a",l.a.createElement("code",null,"webpack"),"\u6765\u6253\u5305",l.a.createElement("code",null,"react"),"\u4ee3\u7801\u5462?"),l.a.createElement("p",null,"\u4e0b\u9762\u5c31\u5f00\u59cb\u5199",l.a.createElement("code",null,"webpack.client.js"),"\u6587\u4ef6"),l.a.createElement(r["a"],{code:"const path = require('path');\nmodule.exports = {\n  mode: 'development',\n  entry: path.join(__dirname, '../src/client/index.tsx'), //\u5165\u53e3\u6587\u4ef6\n  output: {\n    //\u6253\u5305\u51fa\u6765\u7684\u6587\u4ef6\u540d\u548c\u5730\u5740\n    filename: 'bundle.js',\n    path: path.join(__dirname, '../dist'),\n  },\n\n  module: {\n    //\u56e0\u4e3awebapck\u672c\u8eab\u662f\u4e0d\u652f\u6301ts\u7684\uff0c\u6240\u4ee5\u9700\u8981\u501f\u52a9\u63d2\u4ef6\u6765\u8f6c\u4e49\n    rules: [\n      {\n        test: /\\.ts(x)?/,\n        use: ['babel-loader'], //\u6240\u4ee5\u5c31\u9700\u8981\u4e0b\u8f7dbabel-loader\u8fd9\u4e2a\u63d2\u4ef6,\u8fd8\u9700\u8981\u4e0b\u8f7d@babel/core\n      },\n    ],\n  },\n  resolve: {\n    //\u914d\u7f6e\u5982\u4f55\u89e3\u6790\u6a21\u5757\n    extensions: ['.ts', '.tsx', '.js', '.json'], //\u5c1d\u8bd5\u6309\u987a\u5e8f\u89e3\u51b3\u8fd9\u4e9b\u6269\u5c55\u540d,\u5982\u679c\u591a\u4e2a\u6587\u4ef6\u5171\u4eab\u76f8\u540c\u7684\u540d\u79f0\uff0c\u4f46\u5177\u6709\u4e0d\u540c\u7684\u6269\u5c55\u540d\uff0c\u5219webpack\u5c06\u89e3\u6790\u8be5\u6269\u5c55\u540d\u5728\u6570\u7ec4\u4e2d\u9996\u5148\u5217\u51fa\u7684\u6587\u4ef6\uff0c\u5e76\u8df3\u8fc7\u5176\u4f59\u6587\u4ef6\n  },\n};",lang:"js"}),l.a.createElement("p",null,"\u56e0\u4e3a",l.a.createElement("code",null,"react"),"\u4ee3\u7801\u4e5f\u662f\u9700\u8981\u7528",l.a.createElement("code",null,"babel"),"\u8f6c\u6362\uff0c\u6240\u4ee5\u9700\u8981",l.a.createElement("code",null,"yarn add @babel/preset-react"),",\u7136\u540e\u5c31\u662f\u5728\u9879\u76ee\u6839\u76ee\u5f55\u4e0b\u9762\u65b0\u5efa",l.a.createElement("code",null,".babelrc"),"\u6587\u4ef6,\u914d\u7f6e",l.a.createElement("code",null,"babel")),l.a.createElement(r["a"],{code:'{\n  "presets":["@babel/preset-react"]\n}',lang:"js"}),l.a.createElement("p",null,"\u6548\u679c\u5982\u56fe\u6240\u793a\uff1a",l.a.createElement("img",{src:t("bzFx")})),l.a.createElement("p",null,"\u67e5\u770b\u6e90\u4ee3\u7801\uff1a"),l.a.createElement(r["a"],{code:'<!DOCTYPE html>\n<html lang="en">\n  <head>\n    <meta charset="UTF-8" />\n    <meta name="viewport" content="width=device-width, initial-scale=1.0" />\n    <title>Document</title>\n  </head>\n  <body>\n    <div id="root"></div>\n    <script src="bundle.js"><\/script>\n  </body>\n</html>',lang:"html"}),l.a.createElement("p",null,"\u4e0a\u8ff0\u4ee3\u7801\u4e2d\u67e5\u770b\u4e0d\u5230",l.a.createElement("code",null,"Hello World"),"\u7684\u5b57\u6837\uff0c\u4f46\u662f\u5728 bundle \u4e2d\u662f\u53ef\u4ee5\u67e5\u770b\u7684\uff0c\u6240\u4ee5\u8fd9\u4e2a\u662f\u4e00\u4e2a\u5178\u578b\u7684\u5ba2\u6237\u7aef\u6e32\u67d3\u4f8b\u5b50\u3002\u6211\u4eec\u6162\u6162\u4e00\u6b65\u4e00\u6b65\u628a\u8fd9\u4e2a\u5ba2\u6237\u7aef\u6e32\u67d3\u7684\u4f8b\u5b50\u6539\u6210 SSR"),l.a.createElement("p",null,"\u63a5\u4e0b\u6765\u662f\u6253\u5305 node,\u65b0\u5efa\u4e00\u4e2a",l.a.createElement("code",null,"webpack.server.js"),",node \u4f5c\u4e3a\u540e\u7aef\u6253\u5305\u7684\u65f6\u5019\u4e00\u822c\u4e0d\u5e0c\u671b\u628a node \u7684\u4f9d\u8d56\u9879\u6253\u8fdb\u53bb\uff0c\u6240\u4ee5\u9700\u8981\u5b89\u88c5\u4e00\u4e2a\u63d2\u4ef6",l.a.createElement("code",null,"yarn add webpack-node-externals -D"),","),l.a.createElement(r["a"],{code:"const path = require('path');\nvar nodeExternals = require('webpack-node-externals');\n\nmodule.exports = {\n  mode: 'development',\n  target: 'node', //\u8868\u793a\u6253\u5305\u7684\u662fnode\u73af\u5883\n  externals: [nodeExternals()], //\u907f\u514d\u628anode_modules\u6253\u5305\u8fdb\u53bb\n  entry: path.join(__dirname, '../src/server/app.tsx'),\n  output: {\n    filename: 'app.js',\n    path: path.join(__dirname, '../dist'),\n  },\n\n  module: {\n    rules: [\n      {\n        test: /\\.ts(x)?/,\n        use: ['babel-loader'],\n      },\n    ],\n  },\n  resolve: {\n    extensions: ['.ts', '.tsx', '.js', '.json'],\n  },\n};",lang:"js"}),l.a.createElement("p",null,"\u7136\u540e\u5728",l.a.createElement("code",null,"package.json"),"\u91cc\u9762\u7f16\u5199\u670d\u52a1\u7aef\u7684\u6253\u5305\u547d\u4ee4"),l.a.createElement(r["a"],{code:'"scripts": {\n  "build:client": "webpack --config build/webpack.client.js",\n  "build:server": "webpack --config build/webpack.server.js"\n},',lang:"js"}),l.a.createElement("p",null,"\u5148\u6267\u884c",l.a.createElement("code",null,"npm run build:client"),",\u5728\u6267\u884c",l.a.createElement("code",null,"npm run build:server"),",\u7528",l.a.createElement("code",null,"cd dist && node app.js"),",\u5c31\u53ef\u4ee5\u8bbf\u95ee\u4e86"),l.a.createElement("p",null,"\u56e0\u4e3a\u6bcf\u6b21\u4fee\u6539\u90fd\u8981\u6267\u884c\u6253\u5305\u547d\u4ee4\u6709\u70b9\u9ebb\u70e6\uff0c\u6240\u4ee5\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528",l.a.createElement("code",null,"nodemon"),"\u6765\u542f\u52a8\u670d\u52a1\uff0c\u56e0\u4e3a\u6bcf\u6b21\u90fd\u8981\u6253\u5305\u5ba2\u6237\u7aef\u548c\u670d\u52a1\u7aef\u7684\u4ee3\u7801\uff0c\u6240\u4ee5\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528",l.a.createElement("code",null,"npm-run-all"),"\u6765\u6279\u91cf\u6253\u5305"),l.a.createElement(r["a"],{code:'"scripts": {\n  "start": "cd dist && nodemon app.js",\n  "build": "npm-run-all --parallel build:*",\n  "build:client": "webpack --config build/webpack.client.js",\n  "build:server": "webpack --config build/webpack.server.js"\n},',lang:"js"}),l.a.createElement("p",null,"\u5982\u679c\u6709\u4fee\u6539\u53ea\u9700\u8981\u91cd\u65b0\u6267\u884c",l.a.createElement("code",null,"npm run build"),"\u7136\u540e\u5237\u65b0\u9875\u9762\u5c31\u4f1a\u770b\u5230\u66f4\u65b0"),l.a.createElement("p",null,"\u4e0a\u8ff0\u6b65\u9aa4\u8fd9\u4e48\u591a\uff0c\u4f46\u662f\u8fd8\u662f\u53ea\u662f\u4e00\u4e2a\u5ba2\u6237\u7aef\u6e32\u67d3\uff0c\u5927\u5bb6\u4e0d\u8981\u7740\u6025\uff0c\u5176\u5b9e",l.a.createElement(A["Link"],{to:"https://zh-hans.reactjs.org/docs/react-dom-server.html#rendertostring"},"react \u5b98\u7f51"),"\u91cc\u9762\u6709\u4ecb\u7ecd\uff0c\u4e3b\u8981\u662f\u4f7f\u7528",l.a.createElement("code",null,"renderToString()"),"\u8fd9\u4e2a api"),l.a.createElement(r["a"],{code:"import Koa from 'koa';\nimport Router from '@koa/router';\nimport serve from 'koa-static';\nimport React from 'react'; //\u65b0\u589e\nimport { renderToString } from 'react-dom/server'; //\u65b0\u589e\nimport App from '../shared/App'; //\u65b0\u589e\n\nconst app = new Koa();\nconst router = new Router();\n\nrouter.get('/', (ctx, next) => {\n  const html = renderToString(<App />); //\u65b0\u589e\n  ctx.body = `<!DOCTYPE html>\n  <html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Document</title>\n  </head>\n  <body>\n    <div id='root'>${html}</div>\n    <script src=\"bundle.js\"><\/script>\n  </body>\n  </html>`;\n});\n\napp.use(serve('public'));\n\napp.use(router.routes()).use(router.allowedMethods());\n\napp.listen(8088, () => {\n  console.log('\u670d\u52a1\u542f\u52a8\u6210\u529f');\n});",lang:"js"}),l.a.createElement("p",null,"\u542f\u52a8\u6210\u529f\uff0c\u67e5\u770b\u6e90\u4ee3\u7801\uff1a"),l.a.createElement(r["a"],{code:'<!DOCTYPE html>\n  <html lang="en">\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Document</title>\n  </head>\n  <body>\n    <div id=\'root\'><h1 data-reactroot="">hello world</h1></div>\n    <script src="bundle.js"><\/script>\n  </body>\n  </html>',lang:"js"}),l.a.createElement("p",null,"\u53ef\u4ee5\u5728\u4e0a\u9762\u770b\u5230",l.a.createElement("code",null,"Hello World"),",\u8bf4\u660e\u4e00\u4e2a\u7b80\u5355\u7684 ssr \u6e32\u67d3\u5df2\u7ecf\u5b8c\u6210\u4e86")))}));n["default"]=e=>{var n=l.a.useContext(A["context"]),t=n.demos;return l.a.useEffect((()=>{var n;null!==e&&void 0!==e&&null!==(n=e.location)&&void 0!==n&&n.hash&&A["AnchorLink"].scrollToAnchor(decodeURIComponent(e.location.hash.slice(1)))}),[]),l.a.createElement(c,{demos:t})}}}]);