ASP에 React 통합NET Core는 Razzle과 SSR, 라우팅, 코드 분할, HMR 등 모든 좋은 제품을 사용합니다 – 섹션 2/2
이 부분에서, 우리는 클라이언트와 서버 측에 데이터를 추가할 것이다.우리는 코드 분할을 연구하고 응용 프로그램의 배치 가능한 패키지로 정리할 것이다.
데이터 로드
우리는 세 가지 상황에서 데이터에 접근할 수 있어야 한다.
public class HeroDb : IHeroDb
{
private readonly Hero[] _items = new[]
{
new Hero{
Id= 1,
Name= "Luke Skywalker",
Height= 172,
Mass= 77,
BirthYear= "19BBY",
},
...
};
public Hero[] GetAll()=>_items;
public Hero Get(int id)=>_items.SingleOrDefault(h => h.Id == id);
}
클라이언트 데이터 로드
우선, 우리는 클라이언트의 루트를 주목할 것이다. 이것은 가장 간단한 부분이 될 것이다.우리는 단지 AJAX를 사용하여 데이터를 검색할 수 있을 뿐이다.업무를 간소화하기 위해서 우리는 항상 하나의 AJAX 호출을 사용하여 현재 페이지의 모든 데이터를 불러옵니다.
컨트롤러에 두 개의 추가 동작을 추가합시다.
public class HeroController : Controller
{
…
[Route("data/")]
public IActionResult IndexData() => Ok(_db.GetAll());
[Route("/data/{id:int}")]
public IActionResult DetailData(int id) => Ok(_db.Get(id));
}
클라이언트의 데이터를 한 위치에 불러오기 위해서, 우리는 간단한 고급 구성 요소를 도입할 것이다.
const page = (WrappedComponent) =>
({ staticContext }) => {
const location = useLocation();
if (!staticContext) {
useEffect(() => {
fetch(`data${location.pathname}`)
.then(r => r.json())
.then(setPageData);
}, [location]);
}
const [pageData, setPageData] = useState(null);
return (
pageData && <WrappedComponent pageData={pageData}></WrappedComponent>
);
};
보시다시피 우리는 staticContext를 설정하지 않은 상태에서만 데이터를 검색합니다. 이것은 클라이언트에서 응용 프로그램을 보여주는 것을 의미합니다.잠시 후, 우리는 서버 측을 위해 다른 방법을 사용할 것이다.
우리는 위치가 클라이언트 루트로 인해 변경될 때마다 데이터를 업데이트하기 위해 위치 의존성을 가진 효과 연결에서 데이터를 얻습니다.
생산 코드에서, 우리는 낡은 요청에 대한 취소와 오류 처리를 추가할 것이지만, 예시를 간단하게 유지하기 위해서, 우리는 여기에서 그것을 생략할 것이다.
페이지 구성 요소 덕분에 HeroList와 HeroDetail 구성 요소에 데이터를 쉽게 추가할 수 있습니다.
const HeroList = ({ pageData }) => (
<div>
<h2>List of heroes</h2>
<div>
<ul>
{pageData.map(hero => (
<li key={hero.id}>
<Link to={`/${hero.id}`}>{hero.name}</Link>
</li>
))}
</ul>
</div>
</div>
);
export default page(HeroList);
const HeroDetail = ({ pageData }) => (
<div>
<h2>{pageData.name}</h2>
<div>
Height: {pageData.height}
</div>
<div>
Mass: {pageData.mass}
</div>
<div>
Year of birth: {pageData.birthYear}
</div>
<div>
<Link to="/">Back to list</Link>
</div>
</div>
);
export default page(HeroDetail);
서버 측 데이터 로드 및 워터 해싱
서버에 데이터를 추가하기 위해서, ssresult와 Render Service 클래스를 작은 조정해야 합니다.
public class SsrResult : IActionResult
{
...
private readonly object _data;
public SsrResult(string url, object data)
{
...
_data = data;
}
public async Task ExecuteResultAsync(ActionContext context)
{
...
var renderResult = await renderService.RenderAsync(_url, _data);
...
}
}
public class RenderService : IRenderService
{
...
public Task<string> RenderAsync(string url, object data) =>
_nodeJSService.InvokeFromFileAsync<string>(_serverJsPath,
args: new object[] { url, data });
}
public class HeroController : Controller
{
...
[Route("/")]
public IActionResult Index() => new SsrResult("/", _db.GetAll());
[Route("/{id:int}")]
public IActionResult Detail(int id) => new SsrResult("/:id", _db.Get(id));
...
}
우리는 현재 서버의 데이터를 사용할 수 있다.js는 응용 프로그램을 보여 줍니다.
const server = (cb, url, data) => {
const context = { data };
const markup = renderToString(
<StaticRouter context={context} location={url}>
<App />
</StaticRouter>
);
...
cb(null, `<!doctype html>
<html lang="">
<head>
...
<script>window.__ROUTE_DATA__=${JSON.stringify(data)}</script>
...
</head>
...
</html>`);
}
우리는 SSR과 수화 과정에서 페이지 고급 구성 요소의 데이터를 이용하려고 한다.
const page = (WrappedComponent) =>
({ staticContext }) => {
const location = useLocation();
let initData = null;
if (staticContext) {
initData = staticContext.data;
} else if (window.__ROUTE_DATA__) {
initData = window.__ROUTE_DATA__;
delete window.__ROUTE_DATA_;
}
if (!staticContext) {
useEffect(() => {
if (!initData) {
fetch(`data${location.pathname}`)
...
브라우저를 확인해 보겠습니다.URL을 열면 초기 요청이 전체 HTML과 모든 데이터를 포함하는 것을 볼 수 있습니다.
https://localhost:5000/4
"목록 되돌리기"링크를 사용하여 목록을 탐색할 때, AJAX 호출이 하나만 실행된 것을 볼 수 있습니다.
코드 분할
우리는 현재 기능이 완비된 고체 계전기가 생겼다.현재 - 코드 분할이 지원하지 않는 멋진 기능을 추가할 때가 되었다.코드 분할을 통해 스크립트를 여러 블록으로 분할하고 필요할 때만 불러올 수 있습니다.이것은 사용자의 로드 시간이 더 빠르다는 것을 의미한다.
우리는 ReactJS.NET 라이브러리를 사용할 것이다. Loadable Components 라이브러리와 달리 SSR도 지원한다.고맙습니다. Razzle은 불러올 수 있는 좋은 구성 요소 React.lazy 를 가지고 있기 때문에 우리의 작업은 상당히 쉬울 것입니다.
우선, 우리는 약간의 의존항을 설치해야 한다.
npm i @loadable/component @loadable/server -d
npm i @loadable/babel-plugin @loadable/webpack-plugin -D
if (target === "web") {
const filename = path.resolve(__dirname, "build");
config.plugins.push(
new LoadableWebpackPlugin({
outputAsset: false,
writeToDisk: { filename },
})
);
}
{
"presets": [
"razzle/babel"
],
"plugins": [
"@loadable/babel-plugin"
]
}
다음에 블록 추출기를 불러올 수 있는 구성 요소에서 서버에 추가해야 합니다.js 파일.
const server = (cb, url, data) => {
const context = { data };
const extractor = new ChunkExtractor({
statsFile: path.resolve(__dirname, 'loadable-stats.json'),
entrypoints: ['client'],
});
const markup = renderToString(
<StaticRouter context={context} location={url}>
<ChunkExtractorManager extractor={extractor}>
<App />
</ChunkExtractorManager>
</StaticRouter>
);
const scriptTags = extractor.getScriptTags();
const linkTags = extractor.getLinkTags();
const styleTags = extractor.getStyleTags();
cb(null, `<!doctype html>
<html lang="">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="utf-8" />
<title>Welcome to Razzle</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>window.__ROUTE_DATA__=${JSON.stringify(data)}</script>
${linkTags}
${styleTags}
</head>
<body>
<div id="root">${markup}</div>
${scriptTags}
</body>
</html>`);
}
우리는 두 페이지를 불러오는 것을 늦추고 싶기 때문에, 응용 프로그램에서 가져오는 것을 포장해야 한다.js 파일, 불러올 수 있는 구성 요소가 제공하는 불러올 수 있는 기능이 있습니다.
const HeroList = loadable(() => import('./HeroList'))
const HeroDetail = loadable(() => import('./HeroDetail'))
loadableReady().then(() => {
hydrate(
...
);
});
인스턴스 응용 프로그램 게시
본고의 앞부분에서 우리는 ASP가 제공하는 표준 React 템플릿을 사용하여 응용 프로그램을 안내했다.순수한 핵심.이 때문에, 발표 프로필은 우리를 위해 만들어진 것이기 때문에, 우리는 그 중의 어떤 줄도 변경할 필요가 없다.csproj 파일을 열면 PublishRunWebpack 대상이 실행 중인 것을 볼 수 있습니다
npm install
npm run build
우리가 해야 할 유일한 일은 웹 패키지 설정을 작은 수정하는 것이다.Razzle은 서버 패키지에서 모든 node_모듈 패키지를 제외합니다.이것은 NodeJS 백엔드에 있어 의미가 있지만, 우리의 예에서 이것은 배치 과정을 더욱 어렵게 할 뿐이다.우리는 소포를 복사해야 한다.json, 가방 자물쇠.json, 대상 서버에 패키지를 설치합니다.우리로서는 웹팩이 모든 의존항을 생성된 가방에 묶는 것이 훨씬 쉽다. 우리는 이렇게 묶을 수 없는 의존항을 사용하지 않았다.
razzle에 대해 마지막으로 수정합시다.구성js.
if (dev) {
...
} else {
if (target === 'node') {
config.externals = [];
}
}
우리는 완성했다.다음 명령을 사용하여 게시를 실행합니다.
dotnet publish
웹 패키지 노드 외부 결론
그러면 SSR React+ASP가 종료됩니다.NET Core 백엔드 통합개인적으로 이런 방식을 정말 좋아하는 것은 우리가 SSR이 역할을 발휘하기 위해 특수한 처리를 필요로 하는 React 라이브러리를 자유롭게 사용할 수 있다는 것이다.우리는 코드 분할과 같은 멋진 것을 사용할 수 있다. 아마도 웹팩이 미래에 제공할 어떤 것도 있을 것이다. 왜냐하면 우리는 ASP를 잘 결합시켰기 때문이다.NET Core 백엔드 및 패키지/반응 섹션
예제 응용 프로그램의 전체 코드official documentation of Webpack에 액세스할 수 있습니다.
Reference
이 문제에 관하여(ASP에 React 통합NET Core는 Razzle과 SSR, 라우팅, 코드 분할, HMR 등 모든 좋은 제품을 사용합니다 – 섹션 2/2), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/pruttned/integrating-react-into-asp-net-core-using-razzle-with-all-the-goodies-like-ssr-routing-code-splitting-and-hmr-part-2-2-3hdc텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
