标签: isomorphic-javascript
如何处理nodejs上的window对象以进行reactjs应用程序的服务器端呈现
我正在尝试为我的reactjs应用程序实现服务器端呈现.我正在使用webpack来构建reactjs应用程序,增强解析来处理nodejs中jsx文件的导入.
我的应用程序依赖于第三方库,如enquire.js.当react应用程序尝试在nodejs上导入enquire.js时,它会失败并显示错误
ReferenceError: window is not defined
由于window对象不可用nodejs如何处理使用窗口进行服务器端呈现的库？
推荐指数
解决办法
查看次数
基于create-react-app的反应应用程序的通用渲染
我有一个基于create-react-app入门套件的应用程序,由于SEO问题需要切换到通用/服务器渲染.
是否有一种简单的方法或示例来获取create-react-app teamplate并添加或修改它以支持通用渲染？
我认为通用的很多例子对我的需求来说过于复杂,如果可能的话,我更喜欢保持它非常干净和简单.
谢谢.
看起来很简单,但由于我是所有webpack/react/node相关内容的新手,如果有人认为这是错误的方法,很想知道......
推荐指数
解决办法
查看次数
如何使用react + router + redux同构处理子域？
我正在建立一个服务,其他公司可以在那里举办社区活动companyname.mydomain.com.我有一个Redux减速机叫做company该公司的某些状态.我希望能够根据请求的子域同构地获取有关该公司的数据.
如果我有一个功能getSubdomain:
function getSubdomain(host) {
const hostWithoutPort = host.split(':')[0];
return hostWithoutPort.split('.').slice(0, -2).join('.');
}
然后在客户端上我通过执行以下操作来获取子域:
const subdomain = getSubdomain(window.location.host);
在服务器上,由于窗口不可用且每个请求的主机不同,我会这样做:
const subdomain = getSubdomain(request.headers.host);
基于此子域正确同构获取公司数据的正确策略是什么？我想也许我可以用状态中设置的子域来初始化我的商店？
react-router isomorphic-javascript react-redux react-router-redux
推荐指数
解决办法
查看次数
如果404,服务器渲染react-router v4 passthrough
在react-router v3中,我们可以知道服务器端呈现何时与当前url不匹配.这允许我将请求传递给我的express.static中间件,而不是发送渲染的应用程序.
在react-router v4中,我们必须使用
const htmlData = renderToString(
<StaticRouter
location={req.url}
context={context}
>
<App/>
</StaticRouter>
);
为了在服务器端呈现.但是,它会自动将所有内容重定向到/.为什么这种行为甚至存在？难道我们不能像我们期望的那样错误地默默地失败吗？
我怎么知道没有任何东西匹配,以便我可以打电话next()让其他快递的路线完成这项工作？
这是我想要使用的整个功能:
app.get('*', (req, res, next) => {
const context = {};
const htmlData = renderToString(
<StaticRouter
location={req.url}
context={context}
>
<App/>
</StaticRouter>
);
console.log(JSON.stringify(context, null, 4)); // empty object
if (context.url) { // <------------------------ Doesn't work (taken from example and thought it would contain the unmatched url)
winston.info(`Passing ${req.url} along`);
next(); // <--------------- Never called even if no …推荐指数
解决办法
查看次数
在同构React应用程序中呈现HTML字符串
存在非SPA场景,其中使用已清理但随机的HTML字符串作为输入:
<p>...</p>
<p>...</p>
<gallery image-ids=""/>
<player video-id="..."/>
<p>...</p>
该字符串源自WYSIWYG编辑器,包含嵌套的常规HTML标记和应呈现给窗口小部件的有限数量的自定义元素(组件).
目前,像这样的HTML片段应该分别在服务器端(Express)上呈现,但最终也将作为同构应用程序的一部分在客户端呈现.
我打算使用React(或类似React的框架)来实现组件,因为它可能适合这种情况 - 它是同构的并且很好地呈现部分.
问题是子串就像
<gallery image-ids="[1, 3]"/>
应该成为
<Gallery imageIds={[1, 3]}/>
JSX/TSX组件在某些时候,我不确定什么是正确的方法,但我希望它是一个常见的任务.
如何在React中解决这个问题？
推荐指数
解决办法
查看次数
建议客户端路由与服务器端路由一起提供角度通用
我刚刚开始使用Angular Universal和全新的'isomorphic'javascript.
关于如何使用逻辑路由系统,我有点困惑,你是否打算建立角度通用作为典型的节点rest api？或者它是否只是意味着立即提供客户端代码,并从外部源/ rest api检索数据？
至于采用角度通用入门套件,例如它从这些路线开始;
app.get('/', ngApp);
app.get('/about', ngApp);
app.get('/about/*', ngApp);
app.get('/home', ngApp);
app.get('/home/*', ngApp);
然后逻辑上包括一个节点/ express/mongo api与此一起获取/发布数据？即;
const bearRoutes = require('./routes/bear')
app.use('/', bearRoutes)
如果是,那么您是否会使用散列策略来区分URL？
使用通用外部api的angular2应用程序提供数据与将所有内容托管在一起之间是否会有明显的性能差异？
谢谢你的建议!
isomorphic-javascript angular2-routing angular-universal angular
推荐指数
解决办法
查看次数
同构/普遍呈现React 15应用程序中断Cloudflare HTTP代理("橙色云")
我有一个同构/通用React应用程序,这意味着它由服务器在服务器上呈现,为客户端,单页面应用程序用户体验提供支持.
我使用Cloudflare配置此应用程序的DNS,并使用其"橙色云"功能来加速和保护我的网站流量,如下图和支持文章中所述:
从链接到文章:"Cloudflare可以在两种模式下运行 - 仅限DNS(未使用;"灰色云")和作为HTTP代理("橙色云"),具有我们的安全性,CDN和性能功能."
我发现使用React 15和Cloudflare的"橙色云"HTTP代理功能运行我的应用程序会导致错误:
reactProdInvariant.js:31未捕获错误:Minified React错误#32; 访问http://facebook.github.io/react/docs/error-decoder.html?invariant=32&args[]=2获取完整的消息,或使用非缩小的开发环境获取完整错误和其他有用的警告.
链接错误的文本:
无法找到ID为2的元素.
此ID可能是指head我的页面的标记:
<!doctype html>
<html lang="en-us" data-reactroot="" data-reactid="1" data-react-checksum="-1233854461"><head data-reactid="2">...
我不会在React 14中遇到这个问题.
当我使用我的应用程序的原始的,未DNS的地址时,我没有得到这个错误,当我切换到"灰色云"以使用Cloudflare作为DNS服务时,我也没有得到它.
禁用服务器端呈现时,我不会遇到此问题.
当我谷歌链接到"实际"错误的文本时,我发现这个Github线程确认这与服务器端呈现有关.
但是,我的情况略有不同:线程的作者遇到错误,"无法找到元素"ID引用style标记,而在我的情况下,未展开的元素ID引用head标记.
当我谷歌生产"包装"错误的文本时,我发现这个Github线程确认这与Cloudflare的HTTP代理有关.此评论说:"如果您正在使用CloudFlare,请禁用HTML的自动缩小功能."
到目前为止,我无法弄清楚如何做到这一点.我很难找到关于Cloudflare究竟对HTTP代理做什么的好信息,以及我如何配置它.
问题:
- 为什么会发生这个错误？
- 我在哪里可以找到有关"橙色云"究竟是什么的信息？
- 在保持Cloudflare HTTP代理的优势的同时解决此问题的最佳方法是什么？
推荐指数
解决办法
查看次数
什么是同构应用？
我一直在阅读多篇有关同构应用程序，为什么这种类型的体系结构更好的文章，等等。但是对于该术语的含义我仍然不确定。
您将如何定义“同构应用程序”，而不必过多地关注细节？
推荐指数
解决办法
查看次数
react.js 在 ajax 请求完成之前不会渲染
我有一个非常简单的React.js组件，我需要制作一个isomorphic（在服务器上渲染）。问题是组件仅在ajax请求完成后才呈现有用的信息，如下所示：
export default React.createClass({
getInitialState() {
return {}
},
componentDidMount() {
fetch("/users/").then(response => {
this.setState(users: response.data)
})
},
render() {
if (this.state.users == undefined) {
return <div />
}
return <div>{this.state.users.map(some_function)}</div>
}
})
问题是div向搜索引擎返回空是没有意义的。我希望ajax请求完成（即使在服务器上）并仅在此之后呈现。我怎样才能做到这一点？
推荐指数
解决办法
查看次数
Nextjs + Docker-Compose：如何解析客户端容器主机名？
这里是 Docker 新手。我的 Nextjs 应用程序遇到了令人困惑的障碍，该应用程序与 API 和数据库容器一起在自己的容器中运行。
我的 Nextjs 应用程序使用 API 容器中的数据。这在服务器端效果很好：Nextjs 应用程序按其应有的方式解析容器主机名。然而，在客户端，应用程序崩溃了，因为容器主机名对浏览器来说没有任何意义（我认为？）。我对如何处理这件事感到相当迷失。有想法吗？
这是我的 Docker Compose 文件，它有助于阐明我的问题。请注意，我通过以下environment字段将主机名传递给 Nextjs 应用程序：
version: '3.8'
services:
# Redis
redis:
image: redis
command: redis-server --requirepass ${REDIS_PASSWORD} --bind redis
ports:
- "6379:6379"
networks:
- mywebappio
# Data Processing Service
mywebapp-api:
container_name: mywebapp-api
restart: always
build:
context: packages/dps-api
dockerfile: Dockerfile
command: npm run dev # npm start prod
working_dir: /usr/src/dps-api
env_file:
- .env
volumes:
- ./packages/dps-api:/usr/src/dps-api
ports:
- "5000:5000"
networks:
- mywebappio
depends_on:
- redis …推荐指数
解决办法
查看次数
标签 统计
reactjs ×7
javascript ×4
node.js ×4
react-router ×2
ajax ×1
angular ×1
cloudflare ×1
dns ×1
enquire.js ×1
express ×1
http-proxy ×1
next.js ×1
react-redux ×1
universal ×1
webpack ×1